Child elements receiving opacity even with the use of rgba

Question

Child elements receiving opacity even with the use of rgba

Navigation

#1 by (1 votes)

1

How can I apply a different opacity to a child element. In the example below it is working correctly, however 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>

css css3

asked by anonymous 10.12.2018 / 16:37

1 answer

On android 8 the Service stops and does not restart when Activity quits DELETE specific row of a table with PHP and AJAX

score 1 · Accepted Answer

Based on the author's comment I made this template using RGBA. So I do not use opacity , but I use alpha of rgba() on background

It works in 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>