113

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

Community
  • 1
  • 1
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • hey @DavidThomas How can u say this question is Duplicate if you have any answer related in this questions wiout used Position and used to Background-images in parent div in pure css ............. – Rohit Azad Malik Jun 04 '12 at 09:53
  • Pre-edit it seemed to be; I read the question in mobile and then, to find duplicates, I switched to desktop. I didn't re-read your question between times. My close-vote will fade away, though, so don't worry about it. – David Thomas Jun 04 '12 at 10:46

7 Answers7

118

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.

Tom
  • 26,212
  • 21
  • 100
  • 111
PaulSatcom
  • 1,189
  • 2
  • 7
  • 2
55

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

Venugopal
  • 1,888
  • 1
  • 17
  • 30
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 1
    my answer is quite similar to yours, but i can't imageine what's wrong with mine – Vladimir Starkov Jun 04 '12 at 10:12
  • @sandeep thanks for the exact answer we were totally confused in this bug......thanks buddy...... – Rohit Azad Malik Jun 04 '12 at 10:12
  • @VladimirStarkov when i give my answer i didn't saw your answer :) – sandeep Jun 04 '12 at 10:21
  • 43
    Use `background-color: rgba(255,255,255,0.3);` instead of opacity. It will not inheritance. – Ashwin Parmar Jul 14 '14 at 04:50
  • As @AshwinP said, his answer worked for me – Hail Hydra Dec 28 '15 at 18:35
  • Your .parent:after `opacity` is not work. Change/remove your background then its clear...!!! [FIDDLE](http://jsfiddle.net/hzSG8/1249/) – Ajay Gupta Feb 29 '16 at 11:01
  • is this possible with background-color instead of a background-image? I can't get it working with background-color – Sambuxc Mar 17 '16 at 15:51
  • 1
    @AshwinP Thanks your solutions seems to be exact. – Vraj Solanki Feb 07 '17 at 14:04
  • This answer is bad for 2 obvious reasons - you should set transparancy like @AshwinP said. But also, because if you place it in the :after pseudo class you are essentially creating a transparant box on top of your content, not under it. If the answer was to place it in :before instead - fine, that could be a solution. But this is just wrong. – Daniel Bengtsson Jul 17 '20 at 04:44
  • Ashwin Parmar answer is the correct and the most suitable for this case, – Stalkium Mar 31 '21 at 13:59
  • @AshwinParmar this is what I needed for mine. I was doing a background linear gradient and using a separate opacity. Instead, I switched each rgba alpha value and it did not inherit. – mondousage Dec 19 '22 at 15:16
20

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

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;
}
Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
14

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.

Aleksandr M
  • 24,264
  • 12
  • 69
  • 143
Rik
  • 141
  • 1
  • 3
6

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

Venugopal
  • 1,888
  • 1
  • 17
  • 30
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • Thanks but this is only background color related not background images ............. – Rohit Azad Malik Jun 04 '12 at 09:35
  • can u give me some example on jsfiddle.net – Rohit Azad Malik Jun 04 '12 at 09:36
  • hi Thank for make a jsfiddle but i don't used position ....... – Rohit Azad Malik Jun 04 '12 at 09:42
  • You'll have to define the position of the "child" (that isn't really a child). Either with javascript or with css. There may be a lot of solutions, each one adapted to a specific web composition. – Denys Séguret Jun 04 '12 at 09:43
  • I added another fiddle : in this one you don't have to know the position of the false child when making the css file. – Denys Séguret Jun 04 '12 at 09:47
  • 1
    I'm upvoting this because I've returned to this question several times, and each time I abandon the highest ranking solutions. Sure, they work, but every time, I end up using a 1px PNG background. I've done it like 5 times now. So, yes, as this answer says, it looks like CSS isn't too good at this. Hopefully I'll find this comment next time I'm considering this. – Ben Apr 03 '14 at 16:08
  • This is wrong. The child has to be inside the parent, which is not in the Fiddle example – Luiz Wynne Jan 05 '22 at 17:40
1

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 !

Prakash Thangavelu
  • 11
  • 2
0

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!

jackJoe
  • 11,078
  • 8
  • 49
  • 64