Grow your CSS skills. Land your dream job.

Opacity of Parent and Child

  • # June 9, 2012 at 1:36 am

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

    # June 9, 2012 at 7:47 am

    Maybe with rgba or hsla color code.

    # June 10, 2012 at 8:16 am

    Hompimpa is right.

    some clue with this ?

    # June 11, 2012 at 1:04 pm

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

    # June 11, 2012 at 2:14 pm

    if you set the opacity of the parent, the children inherit it unless you specify each child to be different.

    RGBA/HSLA will not inherit.

    only other option would be using a png as a background image on the parent.

    # June 12, 2012 at 12:59 am

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

    # June 12, 2012 at 4:35 pm

    how did you do this ?

    # June 12, 2012 at 7:06 pm

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

    # June 13, 2012 at 12:28 pm

    i will share my code here tomorrow.

    # June 13, 2012 at 1:21 pm

    A link would be better.

    # June 13, 2012 at 10:32 pm

    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

    # July 6, 2013 at 10:15 pm

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

    # July 7, 2013 at 1:21 pm

    1

    # July 7, 2013 at 1:22 pm

    This editor blows. I give up

    __
    # July 7, 2013 at 5:26 pm

    use [codepen](http://codepen.io) or [jsfiddle](http://jsfiddle.net).

    To explain @Michael_bonds‘ solution, it’s not that `opacity` “doesn’t work,” it’s simply not the effect you want. You’re looking for a semi-transparent _background_, not a semi-transparent _element_. `opacity` applies to the entire element, including its children, and that _is_ the correct behavior.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".