Problems with opacity

[ChaosKnight]

I'm busy with an "ultra-modern" type of look on a project, so I tried something I have seen before, the background is a carbon-looking striped background that is somewhat dark, and for the content I placed a black box with curved edges, and on top of that I have another div that is supposed to contain the content, but I want to make that a bit lighter, so I made that div's background color white, after I have done that I decided it would look awesome if the black div at the back had some opacity, so I set it to 0.3, but then I discovered that the white div also received the opacity of the parent div, so I tried setting it's opacity to 1.0, but it still didn't work, now the content div looks a bit greyish...

 

Here is my CSS code:

#body {
position: relative;
top: 10px;
background: black;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
-webkit-border-radius: 10px;
        -moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
width: 960px;
height: 450px;
margin-left: auto;
margin-right: auto;
}
#content {
position: relative;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
-webkit-border-radius: 10px;
        -moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
top: 10px;
left: 10px;
height: 430px;
width: 940px;
background: white;
}

 

And here is the HTML part:

<div id="body">
<div id="content">

</div>
</div>

 

Can someone please tell me how to get the content div completely white again without any opacity?

 

Thanks!

[haku]

The maximum opacity of an element is the opacity of it's parent. So if you drop the parent down to 50%, the maximum opacity of the children (i.e. 100%) is only 50%.

 

There are two ways around this:

1) Use a trasparent .png image as your background. With this method, you don't need to set any opacity.

2) Remove the child from the parent, the use either relative or absolute positioning to position the child (which isn't a child anymore) overtop the parent (which isn't a parent anymore).

 

Method 1: easier, more reliable, but requires an extra HTTP request.

Method 2: Won't work for may situations, can be buggy across browsers, and generally a pain in the butt.

[ChaosKnight]

Thanks man, I'll try them both out...