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 transperentDoesn'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 (http://www.gimp.org/).

[jamiemcconnell]

I had this same problem, and everyone kept saying 'Use Opacity:80%' which did exactly as it says on the tin..
Here is a link to my code, and what should be a solution.

http://nodstrum.com/2007/02/02/csstransparency/



Just posted this script of mine into the scripts area.. should have looked here first...

[Twey]

The property is opacity, not Opacity; the values are decimal values from 0 to 1, not percentages; it doesn't work with IE; and it will also make any elements within that element translucent, which is what the OP was attempting to avoid (and in fact the whole point of this post).