Прозрачность CSS - цвет фона

Question

Я пытаюсь получить непрозрачность черного div, чтобы быть .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

Любые предложения очень высокую оценку.

Answer 1

Вы могли бы использовать RGBA вместо этого, если у вас нет никаких забот о поддержке старых версий IE:

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

Answer 2

Использование rgba - DEMO

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

(и не использовать встроенный CSS)

Answer 3

Непрозрачность применяется к дочерним элементам. Поскольку @MattCain предлагает использовать RGBA на цвет фона DIV, чтобы обойти это.

<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>