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

Question

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

Answer 1

要解决此问题，请在父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/

中的工作示例

Answer 2

opacity是继承的，无法重置。

你可以......

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

Answer 3

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

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