If you have worked much with CSS opacity, you know that one of the most frustrating things about it is that by setting it on any page element, it forces it child elements to be transparent also. I would love to hear a technical explanation for that blunder! There are some workarounds, but they involve fancy positioning footwork and are not ideal for large-scale use.
One of the most common and simple uses for transparency is transparent fills on divs. This is a highly desirable and nice looking effect. For example, if you use textured backgrounds like I like to, you can set off text boxes with this effect:
In a perfect world, all we should have to do to achieve this is to set a background-color and opacity value for the container div. But if we do that, the text will take on that transparency as well and become much less readable.
The solution is to using alpha-transparent PNG's to fill the backgrounds of our divs. Here are a bunch of the standard "fills" that I use:
Everybody knows IE 6 doesn't support alpha transparency right? Right. There are fixes for this. My favorite way is the HTC file method. It's not valid CSS, but you could always toss it in an IE-Only stylesheet. In the demo linked to above, I have applied the hack, but it's borked on purpose so you can see how IE 6 handles this. It cannot repeat or position the background image if you use this hack. Not a big deal, just make the fill graphic the exact size you need it. Since it's a flat color, the file size won't be that much bigger. As a quick note, this method has been known to mess with anchor links on occasion, so I'm wary using it on huge-scale sites without a ton of testing.