通过 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" />
</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）。
