Cross browser opacity

Is there a css definititon to make cross browser opacity? Yes. I found this, and it seems to work: If…

Novembre 12, 2009

Is there a css definititon to make cross browser opacity?
Yes.
I found this, and it seems to work:

div.opacized {
	opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .50; /* Safari 1.x */
	-moz-opacity: .50; /* FF lt 1.5, Netscape */
}

If you want a background image with css opacity, you have to make two div, the first with the opacity and the second one css positioned over the first:

<div id='container' style='position:relative;width:600px;height:200px;overflow:hidden;'>
    <div class='opacized' style='background-image:url(image.jpc);position:absolute;top:0px;left:0px;z-index:1;width:600px;height:200px;'>&nbsp;</div>
    <div style='position:absolute;top:0px;left:0px;z-index:2;'>
    normal text over opacized background
    </div>
</div>

Author

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

Comments on “Cross browser opacity”

Just one thought

  1. Curt Hierholcer ha detto:

    Your site is most definately worthy of a bookmark, thanks

Comments are closed