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

css parent-child opacity

Rohit Azad Malik · Jun 4, 2012 · Viewed 122.7k times · Source

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

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.