我必须使用asp.net ajax工具包来完成任务,而我所做的是在触发更新进度控制时在整个屏幕上显示一个div.主要的div(覆盖整个屏幕)有一些不透明度,但是当我尝试在这个内部有一个div时,即使我将它设置为none也可以获得一些不透明度;
示例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与消息没有透明度和白色背景颜色?
解决方法
要克服此问题,请使用父div背景上的RGBA background属性:rgba(64,64,0.5). 64,64是RGB颜色值. 0.5是不透明度值.现在,父级可以有自己的不透明度值,不会由其子级继承. FireFox,Opera,Chrome,Safari和IE9完全支持此功能.
检查工作示例在http://jsfiddle.net/Rp5BN/
为了支持IE 5.5到8,我们需要使用供应商特定的CSS’渐变滤镜:’所以你需要添加这个.
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr =#7f404040,endColorstr =#7f404040);
其中7f表示127,即50%不透明度,404040是颜色.
检查IE http://jsfiddle.net/Rp5BN/2/中的工作示例