CSS Transparency

To make some element transparent you can use the css3 property opacity. This css3 property provides you with decent cross-browser support. This property accepts a value between 0 and 1 with 0 – totally transparent and 1 – no transparency at all.

As usual, none of the IE browsers accept this property. So, you should include filter:alpha(opacity=80); in your css declaration. This time the opacity value lies between 0 and 100 (0 – the elements will be transparent, 100 – no transparency at all). Using these two properties we can get cross-browser transparency.

<–[if gte IE5.5]> .opaque {filter:alpha(opacity=80);}
<![endif]–> .opaque {opacity:0.8; filter:alpha(opacity=80);}

Transparency is Not Seen

As a rule, there is lack of separation between foreground and background transparency. Note that when you give an opacity to an element, the whole element will be transparent (not background only but also the text). Of course, it influences the readability of the text. If even with the opacity of 0.5 the contrast between background and foreground can seem to be optimal, but it is not so pleasant to read the text. Thus, opacity values of 0.8 are recommended in this case.

Internet Explorer Issue

In case Active X scripting (or scripting in general) is disabled the transparency won’t work. Thus, you should always consider that if transparency is used, your site remains to be functional without the opacity applied. In other words, avoid putting content on top of each other. Thus, if the content can be accessed through a transparent element, even the modern browsers can’t guarantee the transparency.

Capricious Firefox

In case you use CSS properties such as line-height and text-decoration, Firefox can make text starts jumping around or shift background images and surrounding borders. Long before opacity, Mozilla used its own property called -moz-opacity. By abusing this, we can simply set the opacity for Safari and Opera and disable it again for Firefox.

<–[if gt IE5]> .opaque {filter:alpha(opacity=80);}
<![endif]–> .opaque {opacity:0.8; -moz-opacity:1;}

Note that such transparency can be applied in Firefox in case you have controlled environment. However, it is better to avoid transparency in Firefox because it can be really irritating and unpredictable.

Reference: www.onderhond.com/blog/work/css-transparency