Div 继承父母的不透明度

Question

我正在尝试使用 Ajaxtoolkit 的 modalpopupextender 创建一个模态弹出窗口，它的工作原理就像一个魅力。

当弹出窗口显示时，我想将页面变灰，并通过分配 popuppanel 的 modalPopup css 类来做到这一点：

<style type="text/css">
    .modalPopup {
        background-color: gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }

    .modalDiv {
        background-color:white;
        height:200px;
        width:400px;
        margin-left:auto;
        margin-right:auto;
        margin-top:200px;
    }
</style>

背景是灰色的，但现在我无法使弹出窗口中的控件再次稳定。我尝试将它们放在一个 div 中，并为 div 分配另一个 css 类，在其中我将不透明度设置为 0 和 100，但这没有区别。

我的弹出面板是这样的：

 <asp:Panel ID="ModalPanel" runat="server" Width="100%" Height="100%" CssClass="modalPopup">
    <div class="modalDiv">
        writesomething:
        <asp:TextBox runat="server" ID="txtModalBox" /><br />

        <asp:Button Text="Ok" ID="btnModalOK" OnClick="btnModalOK_Click" runat="server" />
        <asp:Button Text="Annuller" ID="btnModalAnnuller" OnClick="btnModalAnnuller_Click" runat="server" /><br />
    </div>
</asp:Panel>

所以我的问题是，如何在具有透明背景的面板中设置不透明的 div？

Answer 1

在使用 opacity 时，您不能有一个比其父代更不透明的子代，您应该使用 rgba(0,0,0,0) 中的 alpha 透明度值，这样透明度就不会“继承”

唯一的缺点是rgba() 不是supported below IE 9

Answer 2

如果您想在 9 之前的 IE 版本中使用 rgba，我会提供一个替代方案，但就我个人而言，我不喜欢过度使用它。

http://css3pie.com/documentation/supported-css3-features/

上面的链接将带您进入 CSS3 PIE 项目。在您的站点中使用它的说明非常简单，但简而言之，它允许非 CSS3 兼容的浏览器呈现某些 CSS3 功能（rgba 是这些功能之一，更不用说边框半径，这是另一个不错的功能） .

根据我的经验：一旦用户拉起页面，渲染功能确实需要几分之一秒（大部分时间），但对我来说，这并不是真的当我使用它时一直是个问题，因为它最终看起来就像他们的浏览器仍在加载页面，因为用户习惯于使用旧版浏览器。

希望这可以帮助那些发现自己需要 rgba 但必须保持与 IE8（或其他）完全兼容的人，因为我知道这正是发生在我身上的事情，而且据我所知，这是唯一可用的解决方案。