Cross browser transparency

The CSS3 standard introduces the opacity property for making elements opaque or transparent. Older browser also have support for opacity using various other properties and, in the case of Internet Explorer, filters. This post looks at how to achieve cross-browser, and backward compatible transparency.

Working example

The following is an example of a block sitting on top of some text with a transparent background. The opacity setting for this is 0.75. The text behind can clearly be seen through the transparent background.

This paragraph is behind the transparent block. Queue dummy text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tellus at est viverra elementum sed vitae augue. Nunc condimentum urna in purus porttitor at semper lacus fringilla. Nulla eleifend purus eget diam lacinia iaculis. Proin a massa enim, sit amet lobortis massa. Nam auctor metus quis eros facilisis et luctus massa placerat. Nam sapien justo, tincidunt at fermentum aliquet, mattis ut augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum congue dolor fringilla ullamcorper. Nam non tellus nunc. Nulla facilisi. In luctus felis risus.

Please note that this will not work if you are reading this post in a feed reader, so please click through to view this in a web browser.

How to achieve transparency

The CSS3 standard uses the "opacity" property, for example:

opacity: 0.75; /* CSS3 standard */

Older Gecko and Webkit based browsers support opacity using their own -moz and -khtml properties like so:

-moz-opacity:0.75; /* for older gecko browsers */
-khtml-opacity: 0.75; /* for older webkit browsers */

The Internet Explorer Problem

No version of Internet Explorer to date supports the opacity tag, including IE8. Instead opacity must be done using IE’s filters.

To add some additional problems to the mix, Microsoft have changed the way opacity filters work in IE8, athough it does still support the older method as well as the new method. The older method which works in IE up to and including IE8 is:

filter:alpha(opacity=75);

The newer way (which I found some blogs mention is the only way to do opacity in IE8, but in testing I have found both methods work) is:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

This former method (i.e. "filter:alpha(opacity=75);") is required if IE8 is in IE7 rendering mode.

Putting it all together

To put all the required rules together to achieve an opacity of 75%, the following needs to be added to the element’s declaration in the CSS:

filter:alpha(opacity=75); /* for internet explorer */
opacity: 0.75; /* CSS3 standard */
-moz-opacity:0.75; /* for older gecko browsers */
-khtml-opacity: 0.75; /* for older webkit browsers */

Full HTML and CSS for the working example

CSS:

#example-transparency {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* ie8 supports both; this variant doesn't work if meta tag below used */
  filter:alpha(opacity=75); /* for internet explorer <= 7, and 8 when <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> */
  -moz-opacity:0.75; /* for older gecko browsers */
  -khtml-opacity: 0.75; /* for older webkit browsers */
  opacity: 0.75; /* CSS3 standard */
  background-color: #000;
  position: absolute;
  margin-top: 40px;
  height: 50px;
  width: 600px;
}
#example-transparency p {
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin-top: 15px;
}

HTML:

<div id="example-transparency">
<p>This is some white text sitting in the transparent block</p>
</div>
<p>This paragraph is behind the transparent block. Queue dummy text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tellus at est viverra elementum sed vitae augue. Nunc condimentum urna in purus porttitor at semper lacus fringilla. Nulla eleifend purus eget diam lacinia iaculis. Proin a massa enim, sit amet lobortis massa. Nam auctor metus quis eros facilisis et luctus massa placerat. Nam sapien justo, tincidunt at fermentum aliquet, mattis ut augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum congue dolor fringilla ullamcorper. Nam non tellus nunc. Nulla facilisi. In luctus felis risus.</p>

Update May 12th 2010

In response to some of the comments below I posted "CSS background transparency that doesn’t affect the text on top" to show how to make the text on top not be affected by the background opacity.