窗口大小改变时backdrop-filter模糊效果无法自适应调整的问题

我用以下代码给背景图添加backdrop-filter模糊效果，初始状态显示正常，但调整窗口大小时，模糊滤镜无法像背景图一样自适应调整，尝试给父div设置position:relative也没能解决问题。

原HTML代码 #

<div className="container">
    <div className="blur" />
      <div className="box">
        <h2>Start editing to see some magic happen!</h2>
      </div>
</div>

原CSS代码 #

.container {
  height: 100vh;
  width: 100vw;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.blur::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}

解决方法 #

问题根源是伪元素的backdrop-filter基于原背景图的初始渲染位置进行模糊，窗口缩放时无法同步背景图的偏移。可以直接将模糊效果应用在背景图元素本身，配合缩放解决边缘空白问题，调整后的代码如下：

修改后的CSS代码

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* 裁剪放大后超出的部分 */
  position: relative; /* 让子元素的absolute基于容器定位 */
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(60px); /* 直接给背景图加模糊 */
  -webkit-filter: blur(60px);
  transform: scale(1.1); /* 放大背景图，避免模糊后出现边缘空白 */
}

说明

1. 移除.blur::before伪元素，将模糊效果直接用filter: blur()作用在.blur元素上，模糊效果会跟随背景图的自适应变化同步调整
2. 添加transform: scale(1.1)让背景图略微放大，解决模糊滤镜导致的边缘空白问题
3. 给.container添加overflow: hidden裁剪超出的部分，同时设置position: relative确保子元素的绝对定位基于容器

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