CSS 不透明度 - 背景颜色答案

【问题标题】：CSS opacity - background colourCSS 不透明度 - 背景颜色
【发布时间】：2013-02-05 17:20:22
【问题描述】：

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

JSFiddle

非常感谢任何建议。

【问题讨论】：

标签： css opacity

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用rgba - DEMO

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

(不要使用内联 CSS)

【讨论】：

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

【解决方案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>

【讨论】：