Transparency

And back again...

[ahmedtheking]

It's pretty well known that if you want to make an element transparent, you use:

filter:alpha(opacity=80); opacity: 0.8; -moz-opacity:0.8;

However, it seems that the element's children adopt this transparency and using:

filter:alpha(opacity=100); opacity: 1; -moz-opacity:1;

Doesn't seem to work. Is there any way to make the element's children opaque again? Do we need JS here?

[Robin_reala]

Nope, that’s the way opacity works. What are you trying to make transparent? If it’s a background then you can use a tiled alpha PNG (or if you’re using a very modern browser the rgba() color syntax) for the translucency.

[ahmedtheking]

I think I'm going to have to use a PNG24 as you say. The idea is to have a 80% trans white div over an image BG. This div'll contain content but it looks pants with trans.

[Robin_reala]

PNG32 surely? But yeah, that's the idea.

Fwiw, the rgba() syntax would be:

div { background-color: rgba(255,255,255,204); }

[edited by: Robin_reala at 1:03 pm (utc) on Jan. 31, 2007]

[cmarshall]

You'll be serving IE7 and Firefox only then?

IE6 requires a JScript hack [google.com] to render Xparent PNG.

[ahmedtheking]

Well IE6 can go fudge itself! There's updates for IE7. But yes I agree, it won't work on that, but why do we have to put ourselves through the pain of making our sites work on such a poorly made browser as the IE series?

[cmarshall]

I agree, but IE is a poorly-made 800-lb gorilla that doesn't play well with others.

When I look at my site stats, I see IE6 is still up at about 70% (IE7 is up to almost 20%), and I still get a lot of IE5 traffic.

However, Microsoft is basically forcing its users to upgrade to IE7 (amidst howls of protest from IT Departments throughout the world). IE6 may become much less of an issue soon.