I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand.
Recently, I utilized the .css function in jQuery to create a design element successfully. However, I encountered difficulties when trying to implement the 'radial-gradient...' background feature. Unfortunately, I lack knowledge of the correct syntax for this particular feature.
My initial attempt was as follows:
'background-image': 'radial-gradient(closest corner at 35% 35%, rgba(255, 255, 255, 0.5) 5%, rgba('+ color +','+ opacity +') 20%)'
Regrettably, the above code did not produce the expected outcome. Upon inspecting Firebug, it became apparent that the background-image attribute was not displayed.
The entirety of my jQuery function appears below:
function spots(spotCount) {
var spotCount = spotCount;
for (i = 0; i < spotCount; i++) {
var opacity = '0.' + randomNumber(2, 5);
var color = randomNumber(0, 255) + ',' + randomNumber(0, 255) + ',' + randomNumber(0, 255);
var size = randomNumber(20, 30);
var top = randomNumber(0, (($('#wrap')).height() - size));
var left = randomNumber(-100, (980 - size + 100));
$('<div id="spot' + i + '"></div>').appendTo('#header .width');
$('#spot' + i).css({
position: 'absolute',
top: top + 'px',
left: left + 'px',
'z-index': '-100',
width: size + 'px',
height: size + 'px',
'border-radius': size + 'px',
border: 'rgba(' + color + ',' + opacity + ') solid 1px',
background: 'radial-gradient (closest-corner at 35% 35%, rgba(255,255,255,'+ opacity +'),rgba(' + color + ',' + opacity + '))'
});
}
Additionally, I require the -webkit- syntax compatible with Safari 5.1.
If anyone can provide me with the correct syntax, I would be extremely grateful.
Thank you in advance for your assistance.
You can view the jsfiddle link here: http://jsfiddle.net/g99et0yq/1/
Upon visiting the link, you'll notice that the spots are displaying incorrectly.