This question already has an answer here:
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
Hello I am child 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
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
I know this is old, but just in case it will help someone else.
child Where rgba is: red, green, blue, and a is for transparency.
You can do it with pseudo-elements: (demo on dabblet.com)
your markup:
Hello I am child 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!
