当然可以实现真正的视频文本遮罩效果！你提到的那个示例确实只是个视觉小把戏——它并没有让视频透过文本显示，只是靠白色背景和文本裁剪的组合制造了假象，改了body背景色就露馅了。下面我来给你两种靠谱的实现方式：

方法一：CSS mask 属性（推荐，兼容性好） #

这种方法直接用CSS遮罩功能，让视频只在文本区域显示，完全符合你的需求，现代浏览器都支持。

实现代码： #

<div class="video-mask-container">
  <video src="你的视频文件.mp4" autoplay muted loop></video>
  <h1>视频遮罩文本</h1>
</div>

<!-- 隐藏的SVG用来定义文本遮罩 -->
<svg style="position: absolute; width: 0; height: 0;">
  <defs>
    <mask id="text-mask">
      <text x="0" y="100" font-size="8rem" font-weight="bold">视频遮罩文本</text>
    </mask>
  </defs>
</svg>

.video-mask-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.video-mask-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 给视频应用遮罩 */
  mask: url(#text-mask);
  -webkit-mask: url(#text-mask);
}

.video-mask-container h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 8rem;
  font-weight: bold;
  color: transparent; /* 文本透明，只用来定位 */
}

原理说明： #

我们用SVG定义了一个文本形状的遮罩，然后让视频通过mask属性引用这个遮罩，这样视频就只会在文本的轮廓范围内显示，文本区域外的视频会被完全隐藏，而且文本背景是透明的，不管你把容器放在什么背景上都能正常工作。

方法二：混合模式（适合纯色背景场景） #

如果你的页面背景是纯色，也可以用混合模式快速实现类似效果，但这种方法依赖背景色，灵活性不如第一种。

实现代码： #

<div class="video-blend-container">
  <video src="你的视频文件.mp4" autoplay muted loop></video>
  <h1>视频遮罩文本</h1>
</div>

.video-blend-container {
  position: relative;
  width: 800px;
  height: 400px;
  background: black; /* 背景色要和文本颜色对应 */
}

.video-blend-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten; /* 混合模式实现遮罩效果 */
}

.video-blend-container h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 8rem;
  font-weight: bold;
  color: white;
}

原理说明： #

mix-blend-mode: lighten会让视频中比白色文本暗的部分被过滤掉，只保留文本区域的视频内容，再配合黑色背景，视觉上就像是文本显示了视频。但如果背景不是纯色，这个方法就失效了，所以更适合简单场景。

为什么你提到的示例是假象？ #

你改了body背景色后已经发现了：那个示例用的是background-clip: text，把文本的背景设为白色，然后让视频在文本下方，靠z-index让文本在上层。因为body背景也是白色，所以看起来像是文本显示了视频，但实际上文本区域是白色填充，视频被白色挡住了——一旦body背景变成黑色，白色的文本区域就会显现出来，暴露了它不是真正的视频遮罩。

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