是否可以在不使用背景滤镜的情况下创建类似的效果？因为我的浏览器不支持背景过滤器，NUI

Question

我想要一个这样的结果，但我在试图创造它时打破了我的想法。我不知道这个人是如何创建这个背景的，因为我们的浏览器不支持背景过滤器。

在此输入图片描述

我得到了类似的东西，但我对 img 的结果没有成功。

Answer 1

仅使用 CSS，这可以通过使用固定背景图像和

filter: blur(...px)

来实现。既然你提到你的屏幕截图是从视频中截取的，我怀疑这是单独使用 CSS 创建的。

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

body, .card::before {
  background-image: url(https://picsum.photos/id/57/1920/1080);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.card {
  position: relative;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 50vmin;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: blur(5px);
}

<div class="card">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>