CSS不透明度 - 背景颜色

Question

我试图将黑色div的不透明度设为.5但div（h3标签）的内容不透明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>

JSFiddle

任何建议都非常感谢。

Answer 1

如果你不担心支持旧版本的IE，你可以使用rgba：

background-color: rgba(0, 0, 0, 0.5);

Answer 2

使用rgba - DEMO

background-color: rgba(0, 0, 0, .5)

（并且不使用内联CSS ）

Answer 3

不透明度适用于子元素。正如@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>