Opacity in FF

[anonnerz]

Hey.
Im having an issue using opacity to make shading my main background in FF. It works in IE but not FF.

Ok the basis of what ive done is to make 2 divs over my main background image; the first div has a background of say black with an object opacity (via filter: alpha(opacity=30%) for IE and -moz-opacity: .3 for FF) so now you have a darker shade of the background. Then the second div that is in that first div (the one with the background) has no background and contains all the content. In IE I am able to make the objects opaque using the position: relative CSS tag, however this doesnt work in FF.

Ok that's kinda confusing... so try this:

[code]
body {
background-image: url(Background_Image.png);
}

#div1 {
-moz-opacity: 0.3;
filter: alpha(opacity=30%);
}

#div2 {
position: relative;
}
[/code]

[code]
<div class='div1'>
<div class='div2'>
   Holds all the stuff I want to be fully visible (opacity 100%)
</div>
</div>
[/code]

This technique works in IE but not FF, anyone know why? or another technique to make it work in FF?

Cheers.

[ToonMariner]

[url=http://www.soxiam.com/Code/CSSCrossBrowserTransparency]http://www.soxiam.com/Code/CSSCrossBrowserTransparency[/url]

[monkey_05_06]

There's also -khtml-opacity that should be taken into consideration:

[code]filter: alpha(30);
-moz-opacity: 0.30;
opacity: 0.30;
-khtml-opacity: 0.30;[/code]

That will ensure your opacity settings get applied to all browsers.