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.
Best Answer
You could use rgba instead if you have no worries about supporting older versions of IE:
background-color: rgba(0, 0, 0, 0.5);Use rgba - DEMO
background-color: rgba(0, 0, 0, .5)( and don't use inline CSS )
Opacity applies down to child elements. As @MattCain suggests use RGBA on the DIV Background Color to get around this.
<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>