Cross browser opacity

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

November 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

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Comments on “Cross browser opacity”

One thought

  1. Your site is most definately worthy of a bookmark, thanks

Comments are closed

Recommended

Min height cross browser CSS

In CSS version 2 there is a “min-height” property, but it doesn’t work in the same way in every browser,…

December 17, 2009

A new avatar generator for WordPress with get_avatar and Flathash

Brand new avatars for WordPress Gravatar service

April 7, 2017

3 ways to add author’s image in WordPress

Add author's image in WordPress without a plugin

April 5, 2017

Orari trenord, corri solo quando ce n’รจ bisogno

Hai presente quando corri in stazione per prendere il treno al volo e, quando arrivi, ti accorgi che il treno ha 12 minuti di ritardo?

March 30, 2017

Stop sending email to new user in WordPress admin registration

Prevent WordPress to send notification emails when you manually create new users

March 9, 2017

Add Internet Explorer class to body to detect old browser

When you have clients that still uses an old browser, you need to handle it. This javascript function detects the…

February 27, 2017