CSS opacity - background colour

Question

I'm trying to get a black div's opacity to be .5 but the content of the div (h3 tag) to be opactiy 1. So the white text is still white, with it's opacity not changed/untouched.

<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

Any suggestions much appreciated.

Answer 1

You could use rgba instead if you have no worries about supporting older versions of IE:

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

Answer 2

Use rgba - DEMO

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

( and don't use inline CSS )