Tim Brockman . com

CSS Background Color Transparency – IE Safe

• Tim Brockman
• @ 1:10 am

Creating browser compatible CSS background color transparency is super easy, but it took some investigation (Googlin' until I ended up at Microsoft's site, deciphering this article) to bring internet explorer on board. Almost every browser other than IE are fine with RGBa (Red Green Blue alpha) which lets you specify something like rgba(255 255 255 .8) to put a nice white background with a subtle bit of transparency to the background of a text block. Wow.. both legible and visually busy.

This bit of CSS style markup for background transparency works as one would expect in every browser I've tested. A few old browsers that don't do rgba will be happy with rgb, and IE has an easy workaround that uses 8 character hex (2 for the alpha channel).

<style>
.classname {
/* load plan b for some old-obscure browsers first */
background: rgb(255, 255, 255);

/* load plan a -rgba  */
background: rgba(255, 255, 255, 0.8);

/* even new internet explorer doesn't pay attention so.. */
<!--[if IE]>
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff);
zoom: 1;
<![endif]-->
}
</style>

Hope this helps you boost the visual appeal of your designs. If you can find a Browser that hates this please let me know, or perhaps a better way to do this.