web-dev-qa-db-ja.com

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>

JSFiddle

どんな提案も大歓迎です。

css3opacity
7
Mark

古いバージョンのIEのサポートについて心配がない場合は、代わりにrgbaを使用できます。

background-color: rgba(0, 0, 0, 0.5);
23
Matt Cain

rgbaを使用 [〜＃〜] demo [〜＃〜]

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

（、インラインCSSは使用しない）

5
Zoltan Toth

不透明度は子要素に適用されます。 @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>
0
tim.baker