css - 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-デモ

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>