120

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

Improve this question
2
  • 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 ............. Commented Jun 4, 2012 at 9: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. Commented Jun 4, 2012 at 10:46

7 Answers 7

Reset to default
124

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

...aaand it does not affect other background colors within the child div's (just a quick note)
Adding an hard-coded inline-style is wrong, Please don't share this.
but OP has background-image, it doesnt work there
Most times inline styling is frowned upon, but in some production contexts it can still be used. Anyway point is background-color: rgba(...) is the way to do it. So this was still helpful
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

Improve this answer

10 Comments

my answer is quite similar to yours, but i can't imageine what's wrong with mine
@sandeep thanks for the exact answer we were totally confused in this bug......thanks buddy......
@VladimirStarkov when i give my answer i didn't saw your answer :)
Use background-color: rgba(255,255,255,0.3); instead of opacity. It will not inheritance.
As @AshwinP said, his answer worked for me
|
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; }
Improve this answer

4 Comments

hey @Vlamimir starkov i don't used position ...............
@RohitAzad why it is so big deal?
+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.......
@RohitAzad i defined it only for pseudo element for more flexibility
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.

Improve this answer

Comments

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

Improve this answer

7 Comments

Thanks but this is only background color related not background images .............
can u give me some example on jsfiddle.net
hi Thank for make a jsfiddle but i don't used position .......
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.
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.
|
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 !

Improve this answer

Comments

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!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.