更改窗口大小时，背景滤镜模糊不调整大小

Question

backdrop-filter我有以下代码来对背景图像应用模糊：

<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);
}

它似乎工作得很好，直到调整窗口大小，过滤器不会像背景图像那样调整大小。我尝试将父级更改div为position: relative但也不起作用

https://codesandbox.io/s/snowy-tdd-b5u8ed?file=/src/App.js

Answer 1

目前的修复方法是将此额外样式添加到背景滤镜所在的同一类/ID 中。

非常适合我。

filter: blur(0);

例子：

.blur-section {
    width: 100%;
    backdrop-filter: blur(12px);
    filter: blur(0);
}

Answer 2

::before这不是一个好的选择。您最好应用filter:blur到图像本身。

.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;
  filter: blur(60px);
  backdrop-filter: blur(60px);
}