Geek Answers Handbook

CSS Transparency - Background Color

I am trying to get the transparency of the black div as .5, but the content of the div (h3) tag should be opactiy 1. Thus, the white text is still white, while the opacity is 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 that are very much appreciated.

+6
source share
3 answers

Instead, you can use rgba if you have no problem supporting older versions of IE:

 background-color: rgba(0, 0, 0, 0.5);
+19
source

Use rgba - DEMO

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

(and not use inline CSS)

+5
source

Opacity applies to child elements. Because @MattCain suggests using RGBA on the background color of the DIV 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>
0
source

More articles:


All Articles