我如何移动我的玻璃效果叠加向后?

Question

我创建了一个蓝色背景的叠加，并降低了不透明度，使其具有玻璃/色调效果。我遇到的问题是试图将它移动到我的元素/容器下(我猜调用底层更有意义)。我试过用z-index: -1;但运气不好。有办法解决这个问题吗?

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>

Answer 1

为什么不使用RGBA或HSLA作为background-color?这个问题是因为opacity是最后渲染的。因此，z-index没有影响，因为它是最后渲染的，并且根据定义，它总是在整个元素(包括所有子元素)的顶部。

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>