Html 具有不透明度的 div 内的 div 上没有不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5138006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No opacity on div inside a div with opacity
提问by Nick
I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (that covers the whole screen) is having some opacity but when I try to have a div inside this one that one also gets some opacity even though I set it to none;
我必须使用 asp.net ajax 工具包来执行任务，我正在做的是在触发更新进度控件时在整个屏幕上显示一个 div。主 div（覆盖整个屏幕）有一些不透明度，但是当我尝试在这个里面有一个 div 时，即使我将它设置为无，它也会有一些不透明度；
Example HTML:
示例 HTML：
<ProgressTemplate>
<div class="updateProgressBox">
<div class="updateProgressMessage">
<p>Processing request..</p>
</div>
</div>
</ProgressTemplate>
And CSS:
和 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
}
What should I do to make the div with the message have no transparency and white background color?
我应该怎么做才能使带有消息的 div 没有透明度和白色背景色？
回答by Hussein
To overcome this issue, use the RGBA background property on the parent div background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have its own opacity value that will not be inherited by its children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.
要解决此问题，请在父 div 上使用 RGBA 背景属性background: rgba(64, 64, 64, 0.5)。64、64、64 是 RGB 颜色值。0.5 是不透明度值。现在父级可以拥有自己的不透明度值，该值不会被其子级继承。FireFox、Opera、Chrome、Safari 和 IE9 完全支持这一点。
Check working example at http://jsfiddle.net/Rp5BN/
在http://jsfiddle.net/Rp5BN/检查工作示例
To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.
为了支持 IE 5.5 到 8，我们需要使用供应商特定的 CSS 'gradient filter:' 所以你需要添加这个。
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);
Where 7f represents 127, i.e. 50% opacity and 404040 is the color.
其中 7f 代表 127，即 50% 不透明度，404040 是颜色。
Check working example in IE http://jsfiddle.net/Rp5BN/2/
检查 IE 中的工作示例http://jsfiddle.net/Rp5BN/2/
回答by alex
opacityis inherited and it can not be reset.
opacity是继承的，不能重置。
You can...
你可以...
- Use a background image of a 24bit PNG with the alpha transparency.
- Make the other element nota child.
- Use Hussein's suggestionof using
rgba().
- 使用具有 alpha 透明度的 24 位 PNG 背景图像。
- 使另一个元素不是子元素。
- 使用侯赛因的建议使用
rgba().
回答by user4533280
To accomplish this you need to use an RGBA colour on the background itself as opacity changes the alpha channel for all child nodes within the parent element itself. E.g.
为此，您需要在背景本身上使用 RGBA 颜色，因为不透明度会更改父元素本身内所有子节点的 Alpha 通道。例如
.div {
background-color: rgba(255,0,0, .5);
}
