CSS不透明度 - 背景颜色

Question

我想让一个黑色div的透明度为0.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

欢迎提出任何建议。

- Mark

Answer 1

你可以使用rgba，如果你不用考虑支持旧版IE的话：

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

- Matt Cain

Answer 2

使用 rgba - 演示

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

（并且不要使用内联CSS）

- Zoltan Toth

---

这可能是显而易见的 - 但是像这样使用RGBA是在使用内联CSS吗？ - tim.baker

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>

- tim.baker