Setting Opacity in CSS For Chrome

Question

I've tried the following:

(this is actually for fancybox, as the overlay does not show 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 still nothing (in chrome/safari)

What am I doing wrong?

Answer 1

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

I've never run across the -webkit-opacity style before and can't seem to find any documentation that says it exists. I would try removing it entirely or fixing the syntax bug you have in there: '-webkit-opacity:' to '-webkit-opacity' (without the trailing colon).

If that doesn't work try printing the value of opts.overlayOpacity. Make sure it's something like 0.5 and not 50 or 50%.