Setting opacity in CSS for Chrome

Question

I tried the following:

(this is valid for fancybox as the overlay does not appear in chrome / safari:

$("#fancy_overlay").css({<br /> 'background-color': opts.overlayColor,<br /> 'opacity': opts.overlayOpacity,<br /> '-moz-opacity': opts.overlayOpacity,<br /> '-khtml-opacity': opts.overlayOpacity,<br /> '-webkit-opacity:' : opts.overlayOpacity<br /> }).show(); 

And yet nothing (in chrome / safari)

What am I doing wrong?

Answer 1

opacity should work for chrome / safari / firefox. The -moz and -khtml syntax is used only to support much older versions of these browsers.

I have never met the -webkit-opacity style -webkit-opacity and cannot find documentation that says it exists. I would try to completely remove it or correct the syntax error found there: '-webkit-opacity:' to '-webkit-opacity' (without trailing colon).

If this does not work, try typing opts.overlayOpacity . Make sure it is something like 0.5 , not 50 or 50% .