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 content:

.opacity-alt {background:url(images/smoke.png) repeat;}

Of course, the major drawback to this approach is the extra overhead of having to create the image.  While not a big deal for one or two elements, if at some point in the future you want to change the opacity slightly, you’ll have to open up Photoshop, rework the background image, and, well, it’s a pain.

Something New with CSS3

With CSS3, we come into a whole new collection of wonderful properties that help to get around some of these less than ideal issues with opacity.  The most significant one is the expansion of the rgb() property to include a fourth “channel”: alpha.  The syntax is almost exactly similar to the old rgb(), but simply adds an additional specification.  Here’s the two side-by-side:

.opacity {background-color:rgb(0,0,0);}
.opacity {background-color:rgba(0,0,0,.6)}

The “alpha” specification allows us to change the opacity of the color of the element, not the element itself.  What these means, in a nutshell, is that the old problem of washed out text is completely wiped away.  Here’s the finished example with rgba() applied:

Now, of course, since Microsoft hates people, this approach won’t do you any good in IE 8 or below.  However, if you’re running a real browser like Firefox 3.6, Chrome 4, or even Safari 4, you’re golden.

So that brings up a good question: since IE sucks and doesn’t support this, what are my options for cross-browser support?  Well, fortunately, since IE doesn’t have any idea about rgba(), you can simply use the standard approaches if targeting IE is important to you (remember, per the specs, unrecognized properties will be ignored).  So in our final example, we can modify it slightly to have full cross-browser support by either:

Defaulting to solid color (will take care of IE and other browsers that don’t support rgba():

background-color:#000;
background-color:rgba(0,0,0,.6);

Using a background image (same results as above):

background:transparent url(images/smoke.png);
background:rgba(0,0,0,.6) none;

Or just target IE:

background-color:#000;
filter: alpha(opacity = 60);
background-color:rgba(0,0,0,.6);

As you can see, there’s some cool stuff coming of age in CSS3. Sure, many browsers are still WAY behind (not to mention the problem of user adoption…), but this is something web designers have had to deal with from day one, right?  Nevertheless, these changes are coming eventually, so I hope this was an interesting introduction to some of what is in store for the future of web design.