Opacity!

I'm using a picture of a gardenia for a background here. The gardenia doesn't have any opacity applied to it; it's sitting here at full strength. But opacity has been applied to the content div and, with browsers that support it, the background gardenia will show through because of the opacity applications.

Cross-browser opacity support is part of the CSS3 draft specifications, but today, we do it with the little snippet here:

.one-halfopacity  {
filter: alpha(opacity=50);
-moz-opacity: .5;
}

.eightyopacity  {
filter: alpha(opacity=80);
-moz-opacity: .8;
}

For a given level of opacity, we are going to use two short lines, one which will cause the feature to work in IE and the other that will cause it to work in Mozilla browsers. It will not work in Opera or older browsers, which means plan accordingly and make sure that your color choices work even if there is no opacity. If you use a Mac, and have Safari, please try the following:

opacity: 0.5;
where you can change the opacity by changing the fraction.

For the content div on this page, I'm using a class that causes 70% opacity which means that it's not terribly transparent; just enough to let us see the image through the background-color of the div. We'll see other examples that reduce opacity much further. And we'll see that the opacity filters can be applied to either text or images.

Gotchas!

Your elements in IE must have a width or height in order for opacity to work.

You must use a fraction in your string for Mozilla.

It doesn't work in Opera or older browsers. In IE, it should work in 5.5 and up.

Your CSS won't validate if you include the IE and Moz statements.

I don't believe you can apply these filters to a background image other than through the use of javascript.

Helpful Information

Web Reference discusses the proposed opacity spec for CSS3.

Details on using IE's more elaborate filter syntax.

CSS Edge demos opacity; see second page also.

Domedia's take on opacity with sample and code.

Demos of some IE only filters with code.