Opacity issue with css, div, and asp:Image

Question

Hello,

I have a div that has it's opacity set to 60. Inside the div, I have an asp:Image. It looks like the opacity of the div is also setting the opacity of the image. I tried creating a separate class for the image and setting the opacity to 100, but this doesn't seem to work. Does anyone have a solution?

<div id="PleaseWait" class="Splash">
    <asp:Image ID="Logo" runat="server" ImageUrl="logo.png" CssClass="imgOpac" />

<div style="color: White; font-size: medium;">
    Please wait, searching spectrum listings ...</div>
</div>

<style id="splash" type="text/css">
    .Splash
    {
        padding-top:200px;
        display: none;
        text-align: center;
        color: White;
        vertical-align: top;
        width: 100%;
        height: 100%; 
        filter:alpha(opacity = 60);
        -moz-opacity:0.6;
        background-color:#000000;
        position:absolute;
        z-index:500;
        top:0%;
        left:0%;
    } 
    .imgOpac
    {
        filter:alpha(opacity = 100);
        -moz-opacity:1.0;
    }
    </style>

Answer 1

That's just how css inheritance works. Your image is getting its opacity setting inherited from its parent div. So 100% of 60% is still 60%.

See http://www.hedgerwow.com/360/dhtml/css-opacity-inherit.html for the general workaround (view source). The basic trick is to stack the elements, the one with opacity underneath the one without.

Answer 2

Try this:

.Splash .imgOpac
{
    filter:alpha(opacity = 100);
    -moz-opacity:1.0;
}

That should override the Splash class.