如何实现仅模糊文字内背景图不模糊文字效果 CSS HTML问题

问题原因 #

CSS 滤镜会作用于当前元素的全部渲染内容，包括背景、文字、所有子元素，你直接给.title添加模糊滤镜，自然会出现文字和填充背景一起模糊的问题。

实现思路 #

将模糊背景和文字裁剪拆分为两个独立渲染层，避免滤镜影响文字边缘：

1. 用.title的伪元素承载填充背景、饱和度和模糊滤镜，滤镜仅作用于该独立层
2. 父元素.title仅保留文字形状裁剪逻辑，不添加任何滤镜，保证文字边缘清晰

修改后代码 #

CSS 部分（HTML 无需修改）：

body {
  background: #16171a;
  margin: 0;
}

.bg {
  background-image: url(https://xl.movieposterdb.com/21_08/2021/1160419/xl_1160419_230b1df1.jpg?v=2021-10-28%2022:02:33);
  background-size: cover;
  position: fixed;
  inset: 0;
  margin: auto;
  filter: grayscale(100%) brightness(10%);
}

.title {
  font-size: 40vw;
  font-family: 'Teko';
  text-align: center;
  z-index: 100;
  position: fixed;
  inset: 0;
  margin: auto;
  /* 仅做文字形状裁剪，不添加滤镜 */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  overflow: hidden;
}

.title::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 继承父级背景地址，避免重复书写 */
  background-image: inherit;
  background-size: cover;
  /* 滤镜仅作用于伪元素的背景层 */
  filter: saturate(90) blur(20px);
  z-index: -1;
}

直接替换原有 CSS 即可实现预期效果。

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