Div继承了父母的不透明性

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 ?

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

I'll offer an alternative if you want to use rgba with IE versions earlier than 9, but, personally, I don't like to overuse this.

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

The link above will take you to the CSS3 PIE project. The instructions for its use in your site are pretty straight forward, but in short, it allows non-CSS3 compatible browsers to render certain CSS3 features (rgba being one of those features, not to mention border-radius, which is another nice one).

In my experience: It does take a fraction of a second (most of the time) to render the features once the user has pulled up the page, but for me, this hasn't really been a problem when I've used it because it just ends up looking like their browser was simply still loading the page, since the user is used to using an older browser anyway.

Hope this helps someone who finds themselves in need of rgba but must remain fully compatible with IE8 (or others), as I know that is exactly what happened to me, and, to my knowledge, this was the only available solution.