Irakli:

How do you create transparent-background DIVs, that works across browsers? If your first thought is “I have no clue” or “just use opacity CSS property”,read on for some useful tips.

The best way, in my opinion is CSS 3.0: rgba(R,G,B,ALPHA), but since only Safari supports CSS 3.0 currently (to the best of my knowledge, but you bet IE does not) that won’t work.

You can also try using the combined CSS properties:

and think to yourself: “OK, I used three properties for one thing, so the cross-browser demons should be happy, right? What can possibly go wrong?”

Unfortunately, a lot can go wrong. Namely, all child elements of the div, the background of which you just made transparent, will also become transparent. Even if you have no children divs: all your text, within the div, will be transparent.

What to do? What to do? You rush to Google and find all kinds of MMFW-CSS (make-me-feel-worse, CSS) tricks that do not help – like the one suggesting the inside elements should not really be children of the initial div, but be overlapped using, nothing less than, an absolute positioning. Yeah, like that really helps: adding the pain of absolute positioning to the already existing list of pains with your page’s CSS! But, do not despair! There is a solution. Here is a working solution, tested in most browsers:
How do you create transparent-background DIVs, that works across browsers? If your first thought is “I have no clue” or “just use opacity CSS property”,read on for some useful tips.

The best way, in my opinion is CSS 3.0:

rgba(R,G,B,ALPHA), but since only Safari supports CSS 3.0 currently (to the best of my knowledge, but you bet IE does not) that won’t work.

You can also try using the combined CSS properties: filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5; and think to yourself: “OK, I used three properties for one thing, so the cross-browser demons should be happy, right? What can possibly go wrong?”

Unfortunately, a lot can go wrong.

Namely, all child elements of the div, the background of which you just made transparent, will also become transparent. Even if you have no children divs: all your text, within the div, will be transparent.

What to do? What to do? You rush to Google and find all kinds of MMFW-CSS (make-me-feel-worse, CSS) tricks that do not help – like the one suggesting the inside elements should not really be children of the initial div, but be overlapped using, nothing less than, an absolute positioning. Yeah, like that really helps: adding the pain of absolute positioning to the already existing list of pains with your page’s CSS!

But, do not despair! There is a solution.

Here is a working

solution, tested in most browsers:

The 70percent.png is a PNG image with 70% percent alpha transparency.

The “filter:” CSS style fixes IE’s shortcoming of having no clue about PNG Alpha channels. The [class] attribute of the .transp class hides that style from IE6. Otherwise you’d get a solid-color background.

You have to hide filter: attribute from IE version > 6 since they do understand the [class] thingie and do handle aplha channels correctly, so they will both apply the filter and the transparent PNG, giving you a comletely different color than what you expected.