我必须使用asp.net ajax工具包执行任务,而我正在做的是在触发更新进度控制时在整个屏幕上显示div。主div(覆盖整个屏幕)有一些不透明度但是当我尝试在这个内部有一个div时,即使我将它设置为无,也会得到一些不透明度;
示例HTML:
<ProgressTemplate>
<div class="updateProgressBox">
<div class="updateProgressMessage">
<p>Processing request..</p>
</div>
</div>
</ProgressTemplate>
和CSS:
.updateProgressBox {
top: 0px;
height: 100%;
background-color:Gray;
opacity:0.7;
filter:alpha(opacity=70);
vertical-align: middle;
left: 0px;
z-index: 999999;
width: 100%;
position: absolute;
text-align: center;
}
.updateProgressMessage {
border: black 2px solid;
background-color: #fff;
z-index: 1000000;
padding: 20px;
opacity:1.0;
filter:alpha(opacity=100);
margin: 300px auto auto auto;
font-weight: bold;
vertical-align: middle;
width: 200px;
text-align: center
}
如何使消息中的div没有透明度和白色背景颜色?
答案 0 :(得分:37)
要解决此问题,请在父div background: rgba(64, 64, 64, 0.5)
上使用RGBA背景属性。 64,64,64是RGB颜色值。 0.5是不透明度值。现在,父级可以拥有自己的不透明度值,不会被其子级继承。 FireFox,Opera,Chrome,Safari和IE9完全支持此功能。
为了支持IE 5.5到8,我们需要使用供应商特定的CSS'渐变过滤器:'所以你需要添加它。
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);
其中7f代表127,即50%不透明度和404040是颜色。
答案 1 :(得分:10)
答案 2 :(得分:2)
要实现此目的,您需要在背景上使用RGBA颜色,因为不透明度会更改父元素本身内所有子节点的Alpha通道。 E.g。
.div {
background-color: rgba(255,0,0, .5);
}