如何用CSS实现示例图中时间显示的模糊文字效果？

嘿，我完全懂你想要的那种效果——就是文字带着毛玻璃质感，同时还能清晰保留文字轮廓对吧？你的两次尝试方向其实都找对了，但确实踩了CSS里的几个小坑，我来帮你捋清楚问题，再给你一个能直接跑通的方案。

先说说你两次尝试的核心问题：

• 尝试1的问题：直接给文字加filter: blur()确实会把整个文字包括边缘都糊掉，因为这个滤镜是作用在整个元素上的，没办法只模糊文字“内部”覆盖的背景区域，所以可读性自然就差了。
• 尝试2的问题：你猜的没错，确实是堆叠上下文和渲染顺序的锅。backdrop-filter需要元素本身在视觉上覆盖在背景图上方，而background-clip: text和backdrop-filter在同一个元素上混用时，浏览器的渲染优先级会搞混：它会先把元素背景裁剪成文字形状，再对裁剪后的区域应用模糊，而不是模糊背后的背景图，所以效果完全不对。

接下来是正确的实现思路，核心是拆分效果到不同元素：用一个元素承载毛玻璃模糊的背景，另一个元素负责文字的轮廓/裁剪，通过堆叠实现你要的效果。这里给你两种靠谱的写法：

方案一：伪元素实现毛玻璃文字（推荐） #

这个方案用伪元素来承载backdrop-filter，再通过clip-path把伪元素裁剪成文字形状，让背景模糊只出现在文字区域，同时可以给上层文字加描边增强轮廓。

<div class="image-container">
  <img src="https://media.timeout.com/images/103444978/image.jpg" alt="背景图">
  <div class="text-overlay" data-text="Test">Test</div>
</div>

.image-container {
  position: relative;
  display: inline-block;
  line-height: 0; /* 消除容器和图片间的多余间距 */
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 真正实现元素居中，你之前的代码缺了这个！ */
  font-size: 10rem;
  font-weight: bold;
  color: transparent; /* 让上层文字透明，只留描边 */
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7); /* 给文字加清晰轮廓 */
  /* 用文字形状裁剪伪元素 */
  -webkit-clip-path: text;
  clip-path: text;
}

.text-overlay::before {
  content: attr(data-text); /* 用data属性同步文字，避免重复编写 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  /* 对背后的背景图应用模糊 */
  backdrop-filter: blur(4px);
  /* 给模糊层加个浅背景增强质感 */
  background-color: rgba(255, 255, 255, 0.15);
  /* 同样裁剪成文字形状，只在文字区域显示模糊效果 */
  -webkit-clip-path: text;
  clip-path: text;
}

方案二：双层元素堆叠（兼容性更好） #

如果担心clip-path: text的兼容性，也可以用两个嵌套元素：外层做毛玻璃模糊，内层做文字轮廓，通过绝对定位让它们完全重叠。

<div class="image-container">
  <img src="https://media.timeout.com/images/103444978/image.jpg" alt="背景图">
  <div class="text-wrapper">
    <div class="text-blur">Test</div>
    <div class="text-outline">Test</div>
  </div>
</div>

.image-container {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10rem;
  font-weight: bold;
  position: relative; /* 作为内部元素的定位容器 */
}

.text-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  /* 把背景模糊裁剪成文字形状 */
  -webkit-background-clip: text;
  background-clip: text;
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.2);
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8); /* 清晰的文字轮廓 */
}

关键细节提醒 #

1. 元素居中：你之前的代码只写了top: 50%; left: 50%，但没加transform: translate(-50%, -50%)，这会导致文字的左上角居中，而不是文字本身居中，一定要补上！
2. 属性兼容性：-webkit-前缀要加上，比如-webkit-background-clip、-webkit-text-stroke，确保在Chrome、Safari等浏览器正常生效。
3. 堆叠顺序：不需要额外加z-index，因为伪元素和内部元素的堆叠顺序默认是符合需求的，乱加反而可能破坏渲染。

你可以把上面的代码拿去测试，调整blur的数值、背景颜色的透明度，就能调出你想要的那种时间显示的模糊效果啦！

内容来源于stack exchange