Fresh Blurbs

CSS Background Transparency

The Right Way is obviously 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) the "right way" is out of question.

Moving on.

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?"

Well, demons are demons because they are evil and more goes wrong than possibly could. 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 and I can bet that was not something you wanted!

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's a way to the light!

With no further delay, here is the workin'-kickin' solution, tested in most browsers:

div.transp[class] {

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.

Also, for some weird reason, "filter" does not understand relative pathes. You have to use absolute path or it won't work. You can thank Microsoft, once again.

comments powered by Disqus