CSS 不透明度 - 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14984395/
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
CSS opacity - background colour
提问by Mark
I'm trying to get a black div's opacity to be .5 but the content of the div (h3 tag) to be opactiy 1. So the white text is still white, with it's opacity not changed/untouched.
我试图让黑色 div 的不透明度为 0.5，但 div（h3 标签）的内容为 opactiy 1。所以白色文本仍然是白色的，它的不透明度没有改变/不变。
<div style="background-color:red;">
<div style="width:470px;color:white;margin-top:170px;">
<div style="background-color:black;opacity:0.5;">
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p>
</div>
</div>
</div>
Any suggestions much appreciated.
任何建议非常感谢。
回答by Matt Cain
You could use rgba instead if you have no worries about supporting older versions of IE:
如果您不担心支持旧版本的 IE，您可以改用 rgba：
background-color: rgba(0, 0, 0, 0.5);
回答by Zoltan Toth
回答by tim.baker
Opacity applies down to child elements. As @MattCain suggests use RGBA on the DIV Background Color to get around this.
不透明度适用于子元素。正如@MattCain 建议在 DIV 背景颜色上使用 RGBA 来解决这个问题。
<div style="background-color:red;">
<div style="width:470px;color:white;margin-top:170px;">
<div style="background-color: rgba(0, 0, 0, 0.5);">
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p>
</div>
</div>
</div>
