- This topic is empty.
-
AuthorPosts
-
May 28, 2019 at 12:42 pm #288478miha1234Participant
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
mihaMay 28, 2019 at 3:40 pm #288505uxfedParticipantA 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 #288535miha1234ParticipantHi @uxfex, and what is work-around :)? tnx!
May 29, 2019 at 12:06 am #288545Paulie_DMemberThere 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 #288569miha1234ParticipantHi
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_DMemberIs 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 #288586miha1234Participant@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_DMemberThe login form is transparent already if you are using
background-color:rgba(255,255,255,0.5);
May 29, 2019 at 10:01 pm #288610miha1234Participant@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 #288611uxfedParticipantmiha 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 #289011jonhd09ParticipantWith 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.