Div наследует непрозрачность родителей

Question

Я пытаюсь создать модальное всплывающее окно, используя modalpopupextender Ajaxtoolkit, который работает как шарм.

в то время как всплывающее окно показывает я хочу серую страницу, и сделал это путем присвоения 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> 

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> 

Так что мой вопрос, как я есть не Transparant DIV внутри панели с Transparant фоне?

Answer 1

Вы не можете иметь ребенка тот более непрозрачным, чем его родитель при использовании opacity вы должны использовать значение альфа-прозрачность в rgba(0,0,0,0) так, что прозрачность не «унаследовал»

Единственным недостатком является то, что rgba() не является supported below IE 9

Answer 2

Я предлагаю альтернативу, если вы хотите использовать rgba с версиями IE раньше 9, но, лично, я не люблю злоупотреблять этим.

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

указанной выше ссылке приведет вас к проекту CSS3 PIE. Инструкции по его использованию на вашем сайте довольно прямолинейны, но, короче говоря, он позволяет браузерам, не совместимым с CSS3, отображать определенные функции CSS3 (rgba является одной из этих функций, не говоря уже о пограничном радиусе, что является еще одним приятным) ,

По моему опыту: Для визуализации функций требуется часть секунды (большую часть времени), если пользователь поднял страницу, но для меня это не было проблемой, когда Я использовал его, потому что он просто заканчивается тем, что его браузер просто загружает страницу, так как пользователь все равно использует старый браузер.

Надеюсь, это поможет кому-то, кто нуждается в rgba, но должен оставаться полностью совместимым с IE8 (или другими), поскольку я знаю, что именно это произошло со мной, и, насколько мне известно, это единственное доступное решение ,