Opacity of Parent and Child

[Manojsethi]

I don’t want to inherit the opacity of the parent class in the child class. so please help me.

[Taufik Nurrohman]

Maybe with rgba or hsla color code.

[ylc66]

Hompimpa is right.

some clue with this ?

[Manojsethi]

I got without rgba why to move in css2 when we have css3

[Manojsethi]

it’s possible with opacity tag in css3 using positining. I got it with css3.

[ylc66]

how did you do this ?

[joshuanhibbert]

@Manojsethi That sounds like an incredibly ugly hack, and probably indicates that you should tackle the problem another way.

[Manojsethi]

i will share my code here tomorrow.

[Paulie_D]

A link would be better.

[Michael_bonds]

Hi, Manojsethi. This is actually a pretty easy task once you figure it out. I know this because I once had the same issue! Also does not require any trickery or hacks.

What you are probably trying to do is something along the lines of this:

#someParent {

opacity: .5;

}

You would probably expect this to work, but sadly, it doesn’t.

What you need to do, would be something like what I have below:

#someParent {

background: rgba(0,0,0,0.5);

}

What the above css does, is set an RGB colour on the parent element and change its opacity.

The first 3 zeros represent your colour choice in their RGB codes. The third nuber (the 0.5) represents the alpha transparency (opacity) of that colour.

So, if you ever need to effect only the parent element on a web page, make sure to use rgba.

I hope that has helped!

-Mike

[overtly]

^Mike, thanks so much! Was looking everywhere for this and your solution works perfectly.

[PicnicTutorials]

1

[PicnicTutorials]

This editor blows. I give up

[Saurabh Raja]

Thanks much! I have been applying rgba to child element while setting back color and opacity attributes for parent and wondering why wouldn’t it work! Thanks again for the solution.

[Author]

Posts