Question

我有一个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>

Answer 1

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

有关常规解决方法，请参阅http://www.hedgerwow.com/360/dhtml/css-opacity-inherit.html（查看源代码）。基本技巧是堆叠元素，不透明的元素位于没有的元素下面。

Answer 2

试试这个：

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

那应该覆盖Splash类。

css，div和asp的不透明度问题：图像

2 个答案: