CSSの不透明度 - 背景色

Question

私はdivの不透明度を0.5にしようとしていますが、div（h3タグ）の内容はopactiy1になります。したがって、白いテキストはまだ白であり、不透明度は変更されていません/手つかず。

<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からDEMO

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>