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

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

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

score 106 · Answer 1 · edited Jan 25 '13 at 16:23

106

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.

edited Jan 25 '13 at 16:23

Tom

25,110
20
96
106

answered Jan 25 '13 at 16:04

PaulSatcom

1,069
2
7
2

2

...aaand it does not affect other background colors within the child div's (just a quick note) – CularBytes Apr 16 '16 at 11:40
Adding an hard-coded inline-style is wrong, Please don't share this. – Ofir Hadad Dec 31 '17 at 13:44

score 51 · Accepted Answer · edited Jan 27 '16 at 07:42

51

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

edited Jan 27 '16 at 07:42

Venugopal

1,880
1
17
29

answered Jun 04 '12 at 10:07

sandeep

88,914
23
135
154

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
35

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 – Sam Bruton 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

score 19 · Answer 3 · answered Jun 04 '12 at 09:55

19

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;
}

answered Jun 04 '12 at 09:55

Vladimir Starkov

18,444
6
59
113

hey @Vlamimir starkov i don't used position ............... – Rohit Azad Malik Jun 04 '12 at 09:56
@RohitAzad why it is so big deal? – Vladimir Starkov Jun 04 '12 at 10:06
+1 for your answer you were also near about my requirement actually you didn't define the width height in your parent so that's why i was bit confused in your anwers byw thanks....... – Rohit Azad Malik Jun 04 '12 at 10:19
@RohitAzad i defined it only for pseudo element for more flexibility – Vladimir Starkov Jun 04 '12 at 10:29

score 12 · Answer 4 · edited Sep 05 '14 at 18:55

12

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.

edited Sep 05 '14 at 18:55

Aleksandr M

23,988
12
67
136

answered Sep 05 '14 at 18:38

Rik

121
1
3

score 6 · Answer 5 · edited Jan 27 '16 at 07:05

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

edited Jan 27 '16 at 07:05

Venugopal

1,880
1
17
29

answered Jun 04 '12 at 09:29

Denys Séguret

355,860
83
755
726

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

score 1 · Answer 6 · answered Feb 06 '14 at 09:33

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 !

answered Feb 06 '14 at 09:33

Prakash Thangavelu

11
2

score 0 · Answer 7 · answered Jun 04 '12 at 09:43

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!

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

7 Answers7

Linked

Related