Skip to main content

Forums

This topic contains 10 replies, has 4 voices, and was last updated by  jonhd09 2 weeks, 3 days ago.

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
    Moderator

    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
    Moderator

    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
    Moderator

    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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star