整页div覆盖模糊未显示

Question

我是角度项目的新手，我想为一个组件设置一个div来模糊所有页面大小的

<div class="overlay"></div>
<div class="div-general">
<!-- All <app-components> -->
</div>

.overlay {
position: fixed;
width: 100%;
height: 100%;
filter: blur(4px);
z-index: 2000;
}

Answer 1

CSS的filter: blur()只会模糊目标DOM元素(及其子树/子树(的内容。

即使覆盖具有较高的z索引，它也不会影响同级。

你可以通过以下方式解决这个问题：

• 将filter: blur()应用于.div-general，或者
• 在覆盖div上应用filter:blur()以外的内容，如backdrop-filter

.div-general {
filter: blur(4px);
}

<div class="overlay"></div>
<div class="div-general">
<!-- All <app-components> -->
<p>Sample text</p>
Sample text Sample text Sample text Sample text Sample text
</div>

Answer 2

欢迎来到SO Rob。

宽度和高度将只填充容器的宽度和高度。解决方案可以是确保overlay所在的容器是视口的全部宽度和高度，或者使用vw作为宽度，使用vh作为高度，而不是%:

.overlay {
position: fixed;
width: 100vw;
height: 100vh;
filter: blur(4px);
z-index: 2000;
}

vw是视口宽度的百分比，vh是视口高度的百分比。