css 叠加 div 不叠加
css overlay with a div without overlay
我有一个带有 css class 的面板用于覆盖,其中包含一个 div 应该是不透明的
<asp:panel id="panelOverlay" runat="server" class="Overlay" visible="false">
<asp:panel id="panelPopUpPanel" runat="server" class="PopUpPanel" visible="false">
<asp:panel id="panelPopUpTitle" runat="server" style="width: 100%; height: 20px; text-align: right; ">
<asp:imagebutton id="cmdClosePopUp" runat="server" imageurl="~/pict/graphics/delete.png"></asp:imagebutton>
</asp:panel>
<div class="noOverlay">
<h4>This is the PopUp Window</h4>
<asp:Label runat="server" ID="codice"></asp:Label>
</div>
<div> </div>
</asp:panel>
</asp:panel>
我有这个cssclass
.Overlay {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1000;
}
.noOverlay {
background-color:#ffffff;
filter:alpha(opacity=100);
opacity:1;
}
我无法设置 .noOverlay css 使其工作
谢谢
.noOverlay
不是透明的,但它的父容器使 .noOverlay
看起来好像也是透明的。
改用 rgba
,它允许您仅为该特定元素设置背景颜色和背景透明度:
body {background:green}
.demoBox {
background: #000;
padding: 20px;
}
.Overlay {
/* The last argument is the transparency from 0 to 1 */
background: rgba(0, 0, 0, .5);
color:#fff;
}
.noOverlay {
background: rgba(255, 255, 255, 1);
color:#000;
}
<div class="demoBox Overlay">
I am a transparent div
<div class="demoBox noOverlay">I am not a transparent div</div>
</div>
正如您将在此处看到的,.noOverlay
包含在 .Overlay
div 中,但是,只有 .Overlay
是透明的。
我有一个带有 css class 的面板用于覆盖,其中包含一个 div 应该是不透明的
<asp:panel id="panelOverlay" runat="server" class="Overlay" visible="false">
<asp:panel id="panelPopUpPanel" runat="server" class="PopUpPanel" visible="false">
<asp:panel id="panelPopUpTitle" runat="server" style="width: 100%; height: 20px; text-align: right; ">
<asp:imagebutton id="cmdClosePopUp" runat="server" imageurl="~/pict/graphics/delete.png"></asp:imagebutton>
</asp:panel>
<div class="noOverlay">
<h4>This is the PopUp Window</h4>
<asp:Label runat="server" ID="codice"></asp:Label>
</div>
<div> </div>
</asp:panel>
</asp:panel>
我有这个cssclass
.Overlay {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1000;
}
.noOverlay {
background-color:#ffffff;
filter:alpha(opacity=100);
opacity:1;
}
我无法设置 .noOverlay css 使其工作 谢谢
.noOverlay
不是透明的,但它的父容器使 .noOverlay
看起来好像也是透明的。
改用 rgba
,它允许您仅为该特定元素设置背景颜色和背景透明度:
body {background:green}
.demoBox {
background: #000;
padding: 20px;
}
.Overlay {
/* The last argument is the transparency from 0 to 1 */
background: rgba(0, 0, 0, .5);
color:#fff;
}
.noOverlay {
background: rgba(255, 255, 255, 1);
color:#000;
}
<div class="demoBox Overlay">
I am a transparent div
<div class="demoBox noOverlay">I am not a transparent div</div>
</div>
正如您将在此处看到的,.noOverlay
包含在 .Overlay
div 中,但是,只有 .Overlay
是透明的。