如何让子元素“穿透”父容器背景显示底层内容（如视频）-html教程-PHP中文网

如何让子元素“穿透”父容器背景显示底层内容（如视频）

通过 css 混合模式与图层分离技巧，可使文字区域保持黑色背景与白色文字，同时让指定矩形区域“透明化”并叠加显示底层视频，实现动态镂空效果。

通过 css 混合模式与图层分离技巧，可使文字区域保持黑色背景与白色文字，同时让指定矩形区域“透明化”并叠加显示底层视频，实现动态镂空效果。

在 Web 设计中，有时需要实现「文字遮罩 + 视频透出」的视觉效果：主体文字为白字黑底，但其中若干矩形空白区（如单词间隔）需“挖空”，直接透出背后的视频背景——这并非简单的透明或 z-index 调整能解决，因为子元素默认无法真正“覆盖”或“替代”父元素的背景渲染。

核心难点在于：.rect 是 .text-block 的子元素，而 .text-block 自身有 background-color: black；即使给 .rect 设置 background: transparent 或 rgba(0,0,0,0)，它仍被父级黑色背景所覆盖，无法显露底层视频。

✅ 正确解法是视觉分层 + 混合模式协同：

双图层结构：复制两份完全相同的文本结构（.text-block 和 .text-block-copy），精确重叠定位；
功能分离：
- 底层 .text-block：仅渲染 .rect 元素（设为白色），其余文字设为 color: transparent，并启用 mix-blend-mode: multiply —— 此时白色矩形会与下方视频进行正片叠底混合，自然“透出”视频内容，而黑色背景则因乘法混合变暗/隐去；
- 上层 .text-block-copy：仅显示白色文字（无背景、无混合），绝对定位覆盖其上，确保文字清晰可读；
视频置于最底层：z-index: 1 确保视频作为背景源，被 .text-block 的混合层正确采样。

以下是精简可靠的实现代码：

.content {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.text-block,
.text-block-copy {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 30px;
  font-size: 10vi;
}

/* 仅负责“镂空”效果的图层 */
.text-block {
  mix-blend-mode: multiply;
  background-color: black;
  color: transparent; /* 隐藏文字，只留 rect */
}
.text-block .rect {
  display: inline-block;
  width: 150px;
  height: 5vi;
  margin: 0 10px;
  background-color: white; /* 白色矩形触发 multiply 混合 */
}

/* 仅负责文字显示的图层 */
.text-block-copy {
  color: white;
  pointer-events: none; /* 可选：避免干扰交互 */
}

.video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

<div class="content">
  <!-- 镂空图层（混合） -->
  <div class="text-block">
    <span class="text">We're here</span>
    <span class="rect"></span>
    <span class="text"> to make healthy </span>
    <span class="rect"></span>
    <span class="text">livin effortless,</span>
    <span class="text"> so you can</span>
    <span class="rect"></span>
    <span class="text">live longer</span>
    <span class="text">and happier</span>
    <span class="rect"></span>
  </div>

  <!-- 文字图层（纯显示） -->
  <div class="text-block-copy">
    <!-- 结构完全一致，仅用于渲染文字 -->
    <span class="text">We're here</span>
    <span class="rect"></span>
    <span class="text"> to make healthy </span>
    <span class="rect"></span>
    <span class="text">livin effortless,</span>
    <span class="text"> so you can</span>
    <span class="rect"></span>
    <span class="text">live longer</span>
    <span class="text">and happier</span>
    <span class="rect"></span>
  </div>

  <!-- 视频背景 -->
  <video class="video" autoplay loop muted playsinline><source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4"></source></video>
</div>

⚠️ 注意事项：

mix-blend-mode: multiply 要求父容器不能是 isolation: isolate 或 opacity ，否则混合失效；
所有 .text-block 和 .text-block-copy 必须严格重叠（推荐用 position: absolute; top:0; left:0）；
若需响应式适配，建议使用 vi/vh 单位（如示例中的 10vi, 5vi），避免固定像素导致错位；
移动端需添加 playsinline 和 muted 属性以确保自动播放兼容性。

该方案无需 JavaScript，纯 CSS 实现，性能高效，且兼容现代主流浏览器（Chrome/Firefox/Safari ≥ v79）。