如何实现文字内嵌视频背景+全局底层视频背景效果？

核心思路 #

要实现文字仅显示内部视频、其余区域显示全局背景的效果，关键是利用CSS遮罩（mask） 替代原方案中依赖黑色背景的mix-blend-mode，让文字直接成为视频的"显示窗口"，彻底消除多余的黑色背景：

• 将文字元素作为遮罩层，仅让文字区域透出下方的视频内容
• 全局背景视频放在最底层，确保所有非文字区域都能正常显示它

修改后的代码 #

CSS 代码 #

/* 全局容器，承载全局背景视频 */
.page-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* 全局背景视频 - 最底层 */
.global-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.main-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8em;
  padding: 2rem;
}

.main-title h1 {
  font-weight: 700;
  font-size: 70px;
  line-height: 63px;
  color: white;
}

/* 文字视频容器 - 控制文字与内部视频的层级 */
.text-video-container {
  position: relative;
  display: inline-block;
  width: 350px;
  height: 150px;
}

/* 文字内部的视频 */
.text-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字遮罩层 - 核心实现 */
.masked-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 100px;
  font-family: sans-serif;
  /* 用文字作为遮罩，仅文字区域显示下方视频 */
  -webkit-mask-image: linear-gradient(black, black);
  mask-image: linear-gradient(black, black);
  -webkit-mask-clip: text;
  mask-clip: text;
  color: transparent; /* 文字本身透明，透出下方视频 */
}

HTML 代码 #

<div class="page-container">
  <!-- 全局背景视频 -->
  <video class="global-bg-video" autoplay loop muted>
    <source src="your-global-video.mp4" type="video/mp4" />
  </video>

  <div class="main-title col-12 col-lg-6 d-block">
    <h1>Lorem 
      <!-- 文字视频容器 -->
      <div class="text-video-container">
        <video class="text-bg-video" autoplay loop muted>
          <source src="your-text-video.mp4" type="video/mp4" />
        </video>
        <div class="masked-text">Ipsum</div>
      </div>
      <br>dolor</h1>
  </div>
</div>

关键说明 #

1. 层级控制：全局视频设为最底层（z-index: -2），文字容器在上层，确保非文字区域能正常显示全局背景
2. 遮罩逻辑：通过mask-clip: text将文字转化为遮罩，文字本身设为透明，让下方视频仅在文字笔画范围内显示
3. 兼容性：mask属性添加-webkit-前缀适配webkit内核浏览器，目前主流浏览器均支持该特性

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