我试图在一个半透明的 div 上显示一个小的白色 div(这是 100% 的页面和 0.6 的不透明度)
分区:
<div id="confirmDialogSingle" class="Loading" runat="server" visible="false">
<div id="msgBox" class="loadingImg">
<br /> You already have a request on the chosen date. Are you sure you want to submit this request?<br /><br />
<asp:Button ID="BtnConfirmSingle" runat="server" Text="Yes" Width="60px" onclick="BtnConfirmSingle_Click" />
<asp:Button ID="BtnNo" runat="server" Text="Cancel" onclick="BtnNo_Click" />
</div>
</div>
CSS:
.Loading
{
width: 100%;
height: 100%;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
background: white;
opacity:0.6;
z-index:9999;
transition: width 2s; -moz-transition: width 2s;/* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */
}
.loadingImg
{
opacity: 1;
margin: auto;
width: 700px;
text-align: center;
height: 150px;
padding: 10px;
background-color: white;
border:1px solid #d9a0e2;
}
问题是小 div (.loadingImg) 没有显示在屏幕中央(也尝试了前 50% 和左 50%)并且它的背景仍然显示为透明而不是白色!
最佳答案
试试这个:
.Loading {
position:fixed;
width:100%; height:100%;
top:0; left:0;
background: rgba(255,255,255,0.6);
z-index:9999;
transition: width 2s; -moz-transition: width 2s;/* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ }
.loadingImg {
position: absolute;
top: 50%; margin-top:-85px;
left:50%; margin-left:-360px;
width:700px; height:150px;
opacity: 1;
text-align: center;
padding: 10px;
background-color: #FFF;
border: 1px solid #d9a0e2;
}
或者,您可以使用半透明的 png 图像作为 .Loading div 的背景图像
关于asp.net - 透明div上页面中央的白色div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17966279/