Setting Opacity in CSS For Chrome

Question

Hey all:

I've tried the following:

(this is actually for fancybox, as the overlay does not show in chrome/safari:

$("#fancy_overlay").css({
'background-color': opts.overlayColor,
'opacity': opts.overlayOpacity,
'-moz-opacity': opts.overlayOpacity,
'-khtml-opacity': opts.overlayOpacity,
'-webkit-opacity:' : opts.overlayOpacity
}).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%.