asp.net - 具有不透明度的 div 内的 div 上没有不透明度

Question

我必须使用 asp.net ajax 工具包来完成一项任务，我正在做的是在触发更新进度控件时在整个屏幕上显示一个 div。主 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“渐变过滤器:”因此您需要添加它。

过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

其中 7f 代表 127，即 50% 不透明度，404040 是颜色。

检查 IE 中的工作示例 http://jsfiddle.net/Rp5BN/2/