Translucent Divs with CSS

[wvcaudill2]

Hello, I am making a layout where it has one background image, and a div layout. I can make the divs transparent, but when I do it also makes the images IN thje div layout transparent. Is there anyway using CSS that I can choose which divs are transparent? Please help!

[Tristan S.S.]

How about, make an image that is semi transparent in photoshop or so and save it as a png. Then the divs that you want transparent, give them that image as a background, thus making the div trans but the content not....

[boxxertrumps]

style the innerdivs tonot be transperent, Example

.outer {filter:alpha(Opacity=50);
opacity:0.5; -moz-opacity:0.5;
-khtml-opacity:0.5;}
.inner {filter:alpha(Opacity=100);
opacity:1; -moz-opacity:1;
-khtml-opacity:1;}

[Twey]

style the innerdivs tonot be transperent

Doesn't work. Opacity is parsed as a portion of the parent element's opacity.

Tristan's solution is correct, but you need to use the AlphaImageLoader filter to get IE6 to render the PNGs nicely.

[mburt]

Images are generably "better" I suppose, because it is mostly cross-browser. The hack for IE shouldn't be that hard, but other than that it's supported in most browsers. I know the css opacity support in Opera isn't that good, so the whole image thing is a good alternative.

[Twey]

Konqueror, too, has no opacity support at the moment.

[jscheuer1]

Since Opera 9 css opacity is supported as it is in FF and Safari:

selector {
opacity:0.60;
}

[wvcaudill2]

I dont know how to make a semi transparent image though. I have PhotoShop Elements 3. Also, I want to make my layout easily viewed by most. So, will Tristan's idea be safe to use. Will it work with IE, FF, Opera, and the others?

[wvcaudill2]

anyone?

[Twey]

It will work with any browser that supports PNG alpha transparency, which is all current popular browsers except IE6. Apply the AlphaImageLoader filter, and it will work with IE6 as well.

We don't know how to use your image editing program. Consult the documentation, or get the GIMP.