css、div 和 asp 的不透明度问题：图像答案

【问题标题】：Opacity issue with css, div, and asp:Imagecss、div 和 asp 的不透明度问题：图像
【发布时间】：2009-01-22 16:32:59
【问题描述】：

我有一个 div，它的 opacity 设置为 60。在 div 内，我有一个 asp:Image。看起来div 的不透明度也在设置图像的不透明度。我尝试为图像创建一个单独的类并将opacity 设置为100，但这似乎不起作用。有人有解决办法吗？

<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>

【问题讨论】：

标签： asp.net css

【解决方案1】：

这就是 css 继承的工作原理。您的图像正在从其父 div 继承其不透明度设置。所以 60% 的 100% 仍然是 60%。

请参阅http://www.hedgerwow.com/360/dhtml/css-opacity-inherit.html 了解一般解决方法（查看源代码）。基本技巧是堆叠元素，一个不透明的在下面。

【讨论】：

【解决方案2】：

试试这个：

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

这应该覆盖 Splash 类。

【讨论】：