How to have a transparent <div> with a non-transparent <div> overlaying it?

Question

I have a simple on my page with the opacity being set to 0.5. The problem is, the text inside that is also going transparent. How do I correct that? Do I make another div and place it on top the transparent one? If so, how to do that?

Here is the code I have. The "header" div is position: relative. The others are absolute. The opacity is not showing in IE..

<div id="header">
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
            <div class="transparent" style="background-color:Black; z-index: 0; opacity:0.5; position:absolute;"></div>
            <div class="overlay" style="z-index: 1; position:absolute;">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
            <div id="footer">
            </div>
        </div>

Answer 1

Anything inside a transparent container will "inherit" the opacity, in the sense the opacities will multiply.

If you want a transparent div with non-transparent text, one option is to use a semi-transparent background image instead of using css opacity. Another possibility is... the one spender just posted. The one with the text should have no background at all.

Answer 2

The only way you can achieve such a layout is to use two different divs where the second is not a child of the transparent one.

<div id="container">
 <div class="transparent">
 </div>
 <div class="overlay">
 </div>
</div>

You can set the z-index property of the overlay div to a greater value than the one of the transparent div, to put it 'on top'.

The last step is to position your two relatively to the container. Using "position: relative" on the container and "position: absolute" on the childs will achieve such a thing.

Answer 3

Don't nest the DIVs, but instead position one above the other.