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

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…

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

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

November 9, 2009

Count coloured cells on Google Sheets with reference

In a spreadsheet if you need to count cells based on their background you can use this code in Google…

May 22, 2020

WP doesn’t send email? try this

Snippets for sending emails with Wordpress

February 8, 2020

Two post types share the same taxonomy in WordPress

Sharing a WordPress taxonomy between two post types is useful especially if you want to create a relation between different…

November 14, 2019