Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Opacity of child element

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #288478
    miha1234
    Participant

    Hi

    my problem is this. I have parent div with opacity and I have child div with no opacity. Issue is that opacity of parent element is also applied to child element. How to do use child element will have no opacity?

    https://jsfiddle.net/su9dan8f/1/

    PLEASE LOGIN WITH STRAVA
    Go to Strava for Login

    #login_container {
    margin-top:130px;
    width: 400px;
    background-color:rgba(255,255,255,0.5);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: -1;
    }

    #buttonLogin{
    background-color:rgba(252,76,2, 1);
    z-index: 1;
    }

    tnx
    miha

    #288505
    uxfed
    Participant

    A child element’s opacity will never be greater than that of its parent. Whatever your use-case there will be a work-around.

    #288535
    miha1234
    Participant

    Hi @uxfex, and what is work-around :)? tnx!

    #288545
    Paulie_D
    Member

    There isn’t one. Why are you applying opacity to the parent in the first place?

    What purpose does it serve?

    Especially as you already have a semi-transparent background with background-color:rgba(255,255,255,0.5);

    #288569
    miha1234
    Participant

    Hi

    I have background, on top of this bg is loginForm (which should have some opacity). In this login form there is a button without opacity.

    Is there solution for this?

    Thank you for alll help!

    #288581
    Paulie_D
    Member

    Is there solution for this?

    No

    Opacity isn’t necessary to make the background partially transparent, you’ve already done that by using rgba.

    #288586
    miha1234
    Participant

    @Paulie_D thank you. So there is no solution to make this login form transparent and button on top of it, which is without opacity?

    I guess I will have to change design.

    #288595
    Paulie_D
    Member

    The login form is transparent already if you are using background-color:rgba(255,255,255,0.5);

    #288610
    miha1234
    Participant

    @Paulie_D yes and this is ok. i just need button that is not transparant on top of it :)

    #288611
    uxfed
    Participant

    miha I’m not sure you’re grasping the idea of rgba colours.

    The last number in that rgba colour is the alpha layer, or opacity in other words. So if you want a colour that’s invisible, make that number 0. If you want it fully visible, make it 1. If you want it 50%, make it 0.5.

    So if you want your background colour on your parent element to be 50% opaque, it’ll be 0.5, or background-color:rgba(255,255,255,0.5).
    And if you want your button to be completely opaque, it’ll be 1, or background-color:rgba(255,255,255,1).

    With these styles you can remove your opacity style and just rely on rgba colours.

    #289011
    jonhd09
    Participant

    With these styles you can remove your opacity style and just rely on rgba colours.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.