在具有不透明度的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上使用RGBA背景属性background: rgba(64, 64, 64, 0.5).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().