Background Opacity without affecting Text

If you use the following code to apply an opacity to the background-colour of a box...

Code: Select all

#somediv {
background-color:#000;
filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;

}

how do you prevent any text within that div being opacitised (i don't know if that's a word, it's a tricky verb!)

ta!

Do it in 2 seperate divs? making the background Opaque while the test not opaquized

if my text div if nested in the opaque div, it doesn't seem to make any difference.

You could just make a small graphic file with the light color or whatever and use that. or perhaps set a different opacity for the p tags etc. I never tried but that may work.

__________________

I just tried setting the opacity on text and it doesn't seem to work. Changing the colour of the text makes it visible (depending on the colour you choose) but it doesn't solve the opacity problem.

I'll see if I can come up with anything.

Pete.

Cheers Pete

I tried setting the Opacity to 2.0 (as in my head this theoretically would cancel out the 0.5 opacity) with a p class. Alas it didn't work.

It's like there need to be a setting that ignores opacity or "switches it off" when the parent is opaque but the child doesn't want to be!

OK, as far as I'm aware, there is no solutions to this. I have tried everything I can think of, read through loads of forum posts and articles and it seems that the opacity rule applies itself to every child element. There doesn't seem to be any way of counteracting this.

My advice would be to use a transparent png with it's opacity set at the desired level. And then use this as a bg in your css. Not ideal but the best you'll get at the minute. PNG support will be easier to tackle than this opacity problem.

Does anyone have the link for that 'transparent PNG fixer' for IE?

Pete.

Is this the one you mean Pete? http://homepage.ntlworld.com/bobosola/

This is a javascript solution...

Yeah that's the one, I was looking for it myself and couldn't find it...

I've never used it myself but I assume it works. I'll try it though cos I want to use transparent PNGs myself at the minute.

Cheers,

Pete.

This thread came up at the perfect time for me as well. I'm going to play with this for a new client design.

Thanks for your efforts Pete. And glad my failings could be of some assistance to you Lchad!

Doesn't work with CSS background images apparently.

Oh no!

Pete.