Opacity of child element

[miha1234]

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

[uxfed]

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

[miha1234]

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

[Paulie_D]

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);

[miha1234]

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!

[Paulie_D]

Is there solution for this?

No

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

[miha1234]

@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.

[Paulie_D]

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

[miha1234]

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

[uxfed]

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.

[jonhd09]

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

[Author]

Posts