HTML 和 CSS 中背景模糊的敲除文本答案

【问题标题】：Knockout text with blurred background in HTML and CSSHTML 和 CSS 中背景模糊的敲除文本
【发布时间】：2022-01-04 19:09:42
【问题描述】：

我是 HTML/CSS 的中级初学者，我想做一个在 Figma 或 XD 等设计软件中很容易实现的效果，这是文本背后的模糊背景。我已经阅读了background-clip、backdrop-filter 和普通的filter CSS 属性，但我不知道是否可以将它们放在一起来制作模糊其背后的任何内容的文本。

我在 Figma 中制作了一个简单的模型来展示我所追求的效果以及互联网上的其他问题，而这些问题不是我想要做的：

这在 HTML 和 CSS 中可行吗？如果是这样，我会怎么做？我愿意接受仅在最近的 Chrome 版本中可用和/或需要 JavaScript 的任何东西。

【问题讨论】：

标签： html css filter

【解决方案1】：

这是一个使用面具的想法，但它只适用于 Chrome

.box {
  padding: 20px 0;
  background: url(https://picsum.photos/id/1016/800/600) center/cover;
  text-align: center;
}

h1 {
  font-weight: 900;
  font-family: sans-serif;
  font-size: 100px;
  color: #0002;
  -webkit-mask: linear-gradient(#000 0 0) text;
          mask: linear-gradient(#000 0 0) text;
  backdrop-filter: blur(10px);
}

<div class="box">
  <h1>Some Text</h1>
</div>

【讨论】：

谢谢！按预期完美运行！