CSS不透明度-背景色

我试图使黑色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>

标题这里的标语

---

非常感谢您的建议。

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

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

使用

rgba

-

---

（并且不要使用内联CSS）

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

标题这里的标语

这可能是给定的，但像那样使用RGBA肯定是使用内联CSS吗？

<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>