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

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;"></di开发者_运维百科v>
            <div class="overlay" style="z-index: 1; position:absolute;">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
            <div id="footer">
            </div>
        </div>

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.

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.

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