If you’re a web designer, there are times (I’m sure) when you’ve wanted to have a transparent background for something.  After all, Web 2.0 is all about transparency and rounded corners, right? 😉

In CSS2, there were generally two ways to go about this.  The easiest was to use the “opacity” property.  Sure, it didn’t validate, and you had to use an alternate syntax for IE7, but still…super easy.

.opacity {opacity:.7;}

The major downside (besides lack of support) of this approach is that the opacity is applied to the entire element. So, if you have a div with a bunch of text in it, any opacity setting applied to it will rollup to whatever content is contained within the element to which the opacity is applied.  Especially with text, this can make for some washed-out-looking content:

In this example, the heading has a simple color of “white”, yet it looks very washed out.  This is simply because it inherits the opacity of its parent element.

So if the opacity of the content is important, the next best option is to use a .png as a background image.  With this approach, we get all the benefits of background-opacity, while still preserving the natural opacity of any More >