Div继承了父母的不透明性

Question

I'm trying to create a modal popup using the Ajaxtoolkit's modalpopupextender, which works like a charm.

while the popup is showing i want to gray out the page, and did that by assigning the popuppanel teh modalPopup css class:

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

the backgroudn is grayed out, but now i can't make the controls inside my popup solid again. I tried putting them in a div, and assigning the div another css class where I set the opacity to 0 and 100, but this makes no difference.

my popup panel is this:

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

So my question is, how do i have a not transparant div inside a panel with a transparant background ?

Answer 1

You can't have a child thats more opaque than its parent when using opacity you should instead use the alpha transparency value in rgba(0,0,0,0) so that the transparency isn't "inherited"

The only downside is that rgba() isn't supported below IE 9