Question

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

当弹出窗口显示我想要灰显页面时，通过分配popuppanel teh 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>

backgroudn是灰色的，但现在我无法再将弹出窗口中的控件固定。我尝试将它们放在一个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是这些功能之一，更不用说border-radius，这是另一个很好的功能）

根据我的经验：一旦用户拉出页面，渲染功能只需要几分之一秒（大部分时间），但对我来说，这并不是真的我使用它时遇到了问题，因为它最终看起来他们的浏览器只是在加载页面，因为用户习惯使用较旧的浏览器。

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

Div继承了父母的不透明性

2 个答案: