Child elements receiving opacity even with use of rgba

Asked

Viewed 86 times

1

How can I apply a different opacity to a child element. In the example below is working correctly, but the same code does not work with:

Chrome Version 71.0.3578.80

Firefox Quantum 63.0.

body {
    background: url('http://www.onoirtoronto.com/onoir/wp-content/uploads/website-bg.jpg') center no-repeat;
}

.pai {
    margin:  0 auto;
    background: rgba(0,0,0, .5);
    height: 200px;
    width: 200px;
}

.filho {
    vertical-align: middle;
    margin: 0 auto;
    background: #fff;
    height: 100px;
    width: 100px;
    opacity: 1 !important;
}
<div class="pai">
    <div class="filho">

    </div>
</div>
O código dentro do meu ambiente

css css3

  • One dealing with the same subject, but with a different property https://answall.com/questions/264862/como-fazer-scale-de-umadiv-sem-alterar-os-elements-child

  • One more but with another property tb https://answall.com/questions/346258/fundo-com-blur-e-div-do-meio-sem/

  • The problem is that the rgba is also applying opacity to children, I had already found these posts and tried to solve through the same!

  • But I didn’t see anything with RGBA in that code there you posted... Or else of more details of your problem

  • I didn’t take rgba into account because I thought it wasn’t the solution, I changed it in jsfiddle with rgba and it worked on the jsfiddle page, but the same example doesn’t work in firefox or Chrome.

1 answer

1


Based on the author’s comment I made this template using RGBA. So I don’t use opacity, and yes I use the alpha of rgba() in the background

Works on Chrome, Firefox etc

body {
    background: url('http://www.onoirtoronto.com/onoir/wp-content/uploads/website-bg.jpg') center no-repeat;
}
.pai {
    margin:  0 auto;
    background: rgba(128, 0, 128, 0.5);
    height: 200px;
    width: 200px;
}

.filho {
    vertical-align: middle;
    margin: 0 auto;
    background: rgba(255, 255, 255, 1);
    height: 100px;
    width: 100px;
}
<div class="pai">
	<div class="filho">

	</div>
</div>

  • I rephrased the question, it seems to me I’m doing it right, but in my browsers are not working.

  • @Rech man, this code is supposed to work even on IE8 there’s no way it’s not working there. Unless your monitor has some Brightness or Contrast setting that is not letting you notice the transparency... I suggest you test on another monitor or even by your mobile entering here the question link and running the code.

  • The funny thing, that in this preview feature of stackoverflow, which I also want to thank, I did not know of its existence, it works perfectly, opacity is being applied correctly, but the same code in these two browsers on my machine do not work.

  • 1

    @Rech is probably because there’s more CSS there in your code that’s interfering with that... I suggest you do a quick test creating a separate new file and putting exactly the code of the example.

  • I just added a sample code image working on my machine

  • I found the error, I did not remove the opacity property from the parent element after applying rgba, thank you very much for the help!

  • @Rech no problem young! Good luck on the project!

Show 2 more comments

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.