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

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

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.

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

You can do it with pseudo-elements: (demo on dabblet.com)

your markup:

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

css:

.parent{
	position: relative;
}

.parent:before {
	z-index: -1;
	content: '';
	position: absolute;

	opacity: 0.2;
	width: 400px;
	height: 200px;
	background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0;	
}

.child{
	Color:black;
}

 
 

As mentioned by Tom, background-color: rgba(229,229,229, 0.85) can do the trick. Place that on the style of the parent element and child wont be affected.

You can't. Css today simply doesn't allow that.

The logical rendering model is this one :

> If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .

Reference : css transparency

The solution is to use a different element composition, usually using fixed or computed positions for what is today defined as a child : it may appear logically and visualy for the user as a child but the element doesn't need to be really a child in your code.

A solution using css : fiddle

.parent {
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;
}
.child {
    position: fixed;
    top:0;
}

Another solution with javascript : fiddle

I had the same problem and I fixed by setting transparent png image as background for the parent tag.

This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background !

You can't do that, unless you take the child out of the parent and place it via positioning.

The only way I know and it actually works, is to use a translucid image (.png with transparency) for the parent's background. The only disavantage is that you can't control the opacity via CSS, other than that it works!