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

Posted 2023-03-05

【中文标题】具有不透明度的 div 内的 div 没有不透明度

【英文标题】：No opacity on div inside a div with opacity

【发布时间】：2011-07-05 12:17:18

【问题描述】：

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

【参考方案1】：

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

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

【参考方案2】：

要解决此问题，请在父 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 'gradient filter:' 所以你需要添加这个。

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

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

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

【讨论】：

哇，其中一个很棒的内衬修复程序可以节省您的夜晚。

【参考方案3】：

opacity 已继承，无法重置。

你可以...

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