Back to blog

Cross browser opacity

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

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>

Canonical URL