在具有不透明度的div内的div上没有不透明度

时间:2011-02-28 03:49:53

标签: asp.net html css opacity

我必须使用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没有透明度和白色背景颜色?

3 个答案:

答案 0 :(得分:37)

要解决此问题,请在父div background: rgba(64, 64, 64, 0.5)上使用RGBA背景属性。 64,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/

中的工作示例

答案 1 :(得分:10)

opacity是继承的,无法重置。

你可以......

  • 使用具有Alpha透明度的24位PNG的背景图像。
  • 使另一个元素成为孩子。
  • 使用rgba()使用Hussein's suggestion

答案 2 :(得分:2)

要实现此目的,您需要在背景上使用RGBA颜色,因为不透明度会更改父元素本身内所有子节点的Alpha通道。 E.g。

.div {
    background-color: rgba(255,0,0, .5);
}