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”

One thought

  1. Curt Hierholcer ha detto:

    Your site is most definately worthy of a bookmark, thanks

Comments are closed

Recommended

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

Aprile 20, 2016

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,…

Dicembre 17, 2009

Javascript to make some links blink

Mark each anchor tag (<a href…) with rel=”blinking” to make the tag blink (not very clever, but sometimes useful). This…

Novembre 9, 2009

The Quantcast CMP broke my sites

A javascript error in CMP blocks my site.

Maggio 19, 2023

WP Gutenberg notes

Collection of notes and thoughts on Wordpress Gutenberg blocks development.

Gennaio 9, 2023