I created an overlay with a blue background and reduced the opacity to give it a glassy/tint effect. The problem I’m having is trying to move it under my elements/containers (I guess calling in underlay makes more sense). I’ve tried using z-index: -1; but no luck. Any way to solve this?
body {
background: #00639e; /*Apply blue background to body*/
}
.white-overlay {
background: #f6f9fc;
opacity: 0.3;
width: 100%;
z-index: -1;
}
.block {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
z-index: 999;
}
h1 {
/*color: #000*/; /*Uncomment this to see difference between black and white colors*/
color: #fff;<div class="white-overlay">
<div class="block">
<h1>Hello World</h1>
</div>
</div>>Solution :
why not use RGBA or HSLA as background-color? The issue is caused because opacity is rendered last. As such z-index has no influence as it is rendered last and by definition then always on top of the entire element (incl. all child elements).
body {
background: #00639e; /*Apply blue background to body*/
}
.white-overlay {
background: rgba(246, 249, 252, 0.3);
width: 100%;
}
.block {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
z-index: 999;
}
h1 {
/*color: #000*/; /*Uncomment this to see difference between black and white colors*/
color: #fff;<div class="white-overlay">
<div class="block">
<h1>Hello World</h1>
</div>
</div>