设置backdrop-filter的div无法覆盖全屏问题排查与解决

我有一个名为overlay的div，以及一个名为signupContainer的容器，希望该overlay div覆盖整个屏幕并作为背景实现模糊效果。以下是我的代码：

CSS代码 #

html, body {
    background-image: url('https://host.stcollier.repl.co/img.png');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 1000px;
    background-color: rgba(255, 255, 255 0.5);

}

.blur {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: -99;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
}

.signupContainer {
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 99;
    color: white;
}

HTML代码 #

<div class="blur"></div>

<div class="signupContainer">
  <h1>Sign Up</h1>
</div>

实际效果如下：

可以看到backdrop-filter的模糊效果并未覆盖整个屏幕，仅延伸至其他元素所在位置。请问这是什么原因，该如何修复？

问题原因 #

1. html/body高度未设置为全屏：默认状态下，html和body的高度仅由内部元素撑开，并非全屏高度。你的.blur元素设置了height:100%，但父级body高度不足，导致.blur无法撑满整个屏幕。
2. background-color语法错误：rgba(255, 255, 255 0.5)缺少一个逗号，正确写法应为rgba(255, 255, 255, 0.5)，该错误会导致背景色不生效。

修复步骤 #

1. 修正html/body的基础样式 #

给html和body添加全屏高度，并修复rgba语法错误，同时去掉默认边距避免留白：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url('https://host.stcollier.repl.co/img.png');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 1000px;
    background-color: rgba(255, 255, 255, 0.5);
}

2. 优化.blur的全屏设置 #

使用100vw和100vh直接基于视口尺寸设置宽高，确保元素彻底覆盖全屏：

.blur {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    z-index: -99;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
}

完整修复后代码 #

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url('https://host.stcollier.repl.co/img.png');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 1000px;
    background-color: rgba(255, 255, 255, 0.5);
}

.blur {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    z-index: -99;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
}

.signupContainer {
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 99;
    color: white;
}

HTML

<div class="blur"></div>

<div class="signupContainer">
  <h1>Sign Up</h1>
</div>

修改后，.blur元素会完全覆盖屏幕，backdrop-filter的模糊效果也将全屏生效。

内容的提问来源于stack exchange，提问作者Scollier