- This topic is empty.
-
AuthorPosts
-
May 28, 2019 at 12:42 pm #288478
miha1234
ParticipantHi
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
mihaMay 28, 2019 at 3:40 pm #288505uxfed
ParticipantA child element’s opacity will never be greater than that of its parent. Whatever your use-case there will be a work-around.
May 28, 2019 at 11:04 pm #288535miha1234
ParticipantHi @uxfex, and what is work-around :)? tnx!
May 29, 2019 at 12:06 am #288545Paulie_D
MemberThere 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);
May 29, 2019 at 10:41 am #288569miha1234
ParticipantHi
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!
May 29, 2019 at 11:27 am #288581Paulie_D
MemberIs there solution for this?
No
Opacity isn’t necessary to make the background partially transparent, you’ve already done that by using
rgba
.May 29, 2019 at 11:58 am #288586miha1234
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.
May 29, 2019 at 1:00 pm #288595Paulie_D
MemberThe login form is transparent already if you are using
background-color:rgba(255,255,255,0.5);
May 29, 2019 at 10:01 pm #288610miha1234
Participant@Paulie_D yes and this is ok. i just need button that is not transparant on top of it :)
May 30, 2019 at 12:15 am #288611uxfed
Participantmiha 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.
June 6, 2019 at 8:31 pm #289011jonhd09
ParticipantWith these styles you can remove your opacity style and just rely on rgba colours.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.