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

【问题标题】：Backdrop-filter blur not resizing when changing window size背景滤镜模糊在更改窗口大小时不调整大小
【发布时间】：2023-02-23 19:21:36
【问题描述】：

我有以下代码在背景图像上应用模糊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

【问题讨论】：

标签： css reactjs filter blur

【解决方案1】：

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

【讨论】：