8

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

任何建议都非常感谢。

4

3 回答 3

25

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

background-color: rgba(0, 0, 0, 0.5);
于 2013-02-20T16:04:03.397 回答
5

使用rgba-演示

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

（并且不要使用内联 CSS）

于 2013-02-20T16:04:09.023 回答
0

不透明度适用于子元素。正如@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>
于 2013-02-20T16:06:31.810 回答