How to set opacity in parent div and not affect in child div? [duplicate]

Question

Hey i am searching in google but i can't fine any perfect answer

I want to Opacity in parent DIV but not Child DIV

Example

HTML

<div class="parent"> <div class="child"> Hello I am child  </div> </div> 

Css

.parent{ background:url('../images/madu.jpg') no-repeat 0 0; } .child{ Color:black; } 

Note: -- I want to background-image in Parent Div not Color

Answer 1

I know this is old, but just in case it will help someone else.

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>  

Where rgba is: red, green, blue, and a is for transparency.

Answer 2

May be it's good if you define your background-image in the :after pseudo class. Write like this:

.parent{     width:300px;     height:300px;     position:relative;     border:1px solid red; } .parent:after{     content:'';     background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');     width:300px;     height:300px;     position:absolute;     top:0;     left:0;     opacity:0.5; } .child{     background:yellow;     position:relative;     z-index:1; } 

Check this fiddle