Opacity Issues

setting the background opacity, but not including the contents

[tenthmuse]

I currently use this tag to set the background opacity within a div.

filter: alpha(opacity=70, style=0);
-moz-opacity: 70%;

Now, my challenge is this:

when I have a tag that I use that filter in, such as <div class="blah">, everything contained within "blah" is set to 70% (or whatever) opacity. This is pain. I just want the background set, not the text, graphics and everything else contained within those tags.

I've tried putting another tag *inside* that one, both setting the opacity to 100% and just leaving the opacity OUT entirely, but still...everything in "blah" is transparent somewhat.

I thought about layering, but that doesn't work because i need "blah" to stretch based on content.

Any thoughts? Ideas? this is quasi-urgent.

Thanks!
Joelle

[BlobFisk]

Welcome to WebmasterWorld, Joelle!

This is a pure kludge, requires absolute positioning and is untested!

How about having one div with the opacity settings and another, with a higher z-index, above it with all the content and a backgound set to transparent?

The two divs would have to be the same size, and it's very very raw - but it may suit your purposes...

[drbrain]

Use a background image that is transparent or wait for browsers to support rgba or hsla colors from the CSS3 Color Module Candidate Recommendation.

[tenthmuse]

you can't make a "solid" transparent background image. Like solid white, but set the transparency JUST to the background...at least as far as i know.

I'm a graphic designer and we tried it here in the office, making several versions...i thought of that. I could just tile the semi-transparent background in the div, but one can't be made, alas. Unless you know of a way.

And the other? I was thinking of that, but if I layer is using the z-index, then the box containing the opacity won't stretch based on the content of what's in the z-indexed div. Right?

I know it's not tested. but I've cross-browser tested it for my needs and it works out ok...I just need to figure out how to keep the text and graphics from going transparent, too.

Hmmmm...what if I made a "background" div and just applied the opacity to that. no, I guess that wouldnt' work either because it would be the same situation. bah!

Thanks!

[drbrain]

I did it with a png, but it doesn't seem to work in IE :(

[grahamstewart]

No support for PNG transparency in IE.
But see [webmasterworld.com...] onwards for a possible solution.

[Hester]

The best way is to cheat. Say your transparent background is white. Include the text as well but make it also white so it does not show. Then the div is the right size. Now overlay the same text in a normal div with no opacity set and it will match the div underneath!