Nieprzezroczystość CSS - kolor tła

Question

Próbuję uzyskać nieprzezroczystość czarnego diva .5 ale zawartość div (tag h3) jest opactiy 1. Więc biały tekst jest nadal biały, a jego nieprzezroczystość nie uległa zmianie /nietknięty.

<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

Wszelkie sugestie mile widziane.

Answer 1

Można użyć rgba zamiast jeśli masz żadnych zmartwień o wsparcie starszych wersji IE:

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

Answer 2

Zastosowanie rgba - DEMO

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

(i nie używać inline CSS)

Answer 3

Krycie odnosi się do elementów potomnych. Jak @MattCain sugeruje użycie RGBA na kolor tła DIV, aby ominąć to.

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