如何仅在文本填充区域内应用色调模糊效果？

嘿，这个需求挺有意思的！你现在碰到的核心问题是background-clip: text的局限性——它只能用静态的背景资源（比如渐变、图片），没法直接把backdrop-filter这种实时作用于后方内容的效果作为文字填充。不过咱们可以用CSS蒙版（mask）来绕开这个限制，完美实现你想要的效果。

实现思路 #

咱们需要把文字拆成两层配合：

• 上层：只保留文字的描边，把填充设为透明，用来勾勒清晰的文字轮廓；
• 下层：一个和文字完全一致的“模糊容器”，给它加上你需要的色调和模糊效果，然后用文字形状作为蒙版，让它只在文字区域显示内容。

这样一来，下层的模糊容器会实时捕捉它背后的所有内容（包括背景图、重叠的元素），然后只在文字形状内显示模糊 tint后的效果，上层的描边则负责勾勒出文字的清晰轮廓。

修改后的完整代码 #

HTML

<div class="line vertical"></div>
<div class="line horizontal"></div>
<h1 data-text="Hello">Hello</h1>
<div class="rect tint-blur-background"></div>

CSS

body {
  height: 100vh;
  background: url('https://picsum.photos/1200/800') no-repeat center center;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
}

h1 {
  position: relative;
  font-size: 10rem;
  -webkit-text-stroke: 2px black; /* 保留文字描边，勾勒轮廓 */
  color: transparent; /* 让原文字填充透明，只显示描边 */
  z-index: 2; /* 让描边层在模糊层上方 */
}

h1::before {
  /* 用data-text属性复用原文字内容，避免重复编写 */
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  /* 这里的颜色只是为了生成蒙版形状，实际会被mask裁剪掉 */
  color: black;
  -webkit-text-fill-color: black;
  /* 应用你需要的色调和模糊效果 */
  background-color: rgba(11, 202, 190, 0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* 用文字形状作为蒙版，只显示文字区域的内容 */
  -webkit-mask: text;
  mask: text;
  z-index: -1; /* 把模糊层放在描边层下方 */
}

.rect {
  width: 200px;
  height: 200px;
  z-index: 2;
}

.tint-blur-background {
  background-color: rgba(11, 202, 190, 0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.line {
  position: absolute;
  background-color: black;
  transform-origin: center;
  z-index: 0;
}

.line.vertical {
  width: 50px;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.line.horizontal {
  height: 50px;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

关键细节解释 #

1. data-text属性：用来让伪元素复用原文字的内容，避免重复编写，后续修改文字只需要改一处即可；
2. mask: text：这个属性会把元素的形状裁剪成文字的轮廓，只有文字区域会显示元素的背景和模糊效果；
3. 层级控制：通过z-index确保描边层在模糊层上方，这样文字轮廓清晰，填充区域是模糊的背景内容；
4. backdrop-filter：这个属性会实时作用于元素后方的所有内容，包括背景图、其他重叠的元素（比如你的.line和.rect），完美实现你要的“窗口”效果。

内容来源于stack exchange