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.