本文介绍一种基于 mix-blend-mode 与双层 DOM 结构的纯 CSS 方案，让子元素（如矩形占位符）“穿透”父级纯色背景，直接显示底层视频内容，同时保持文字清晰可见。
本文介绍一种基于 mix-blend-mode 与双层 dom 结构的纯 css 方案，让子元素（如矩形占位符）“穿透”父级纯色背景，直接显示底层视频内容，同时保持文字清晰可见。
在实现「黑底白字 + 文字间留出透明矩形区域以透出背景视频」的效果时，常见的误区是试图让 .rect 元素通过 z-index 或 position “浮出”父容器背景——但只要 .text-block 设有 background-color: black，其子元素默认就在该背景的绘制上下文内，无法真正“挖空”背景。
核心思路是：分离视觉职责，用两层完全重叠的文本容器分别承担不同任务：
-
第一层（
.text-block）：仅渲染白色矩形（.rect），并设置mix-blend-mode: multiply与黑色背景。此时白色矩形会与下方视频发生混合，实际呈现为“视频原貌”（因multiply下白色不遮挡、黑色变透明），而文字设为color: transparent彻底隐藏； -
第二层（
.text-block-copy）：绝对定位覆盖于第一层之上，仅显示白色文字，无背景、无混合，确保文字锐利可读。
这样，视觉上就形成了「文字始终清晰，矩形区域实时透出动态视频」的合成效果。
✅ 关键代码要点：
/* 第一层：负责“挖空” —— 只显示矩形，利用混合模式透出视频 */
.text-block {
position: relative;
background-color: black; /* 父级黑底 */
color: transparent; /* 隐藏文字 */
mix-blend-mode: multiply; /* 让白色矩形透出视频 */
z-index: 2;
}
.text-block .rect {
background-color: white; /* 白色矩形 = 透出区域 */
}
/* 第二层：负责“展示” —— 只显示文字，覆盖在上层 */
.text-block-copy {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
padding: 30px;
color: white;
z-index: 3; /* 确保文字在最上层 */
}
⚠️ 注意事项：
-
mix-blend-mode要求元素处于同一 stacking context 且非隔离容器（避免父级设isolation: isolate或transform等触发新层叠上下文）； - 视频需使用
<video></video>标签并设置position: absolute+inset: 0全屏铺底，object-fit: cover保证填充； - 所有尺寸推荐使用视口单位（如
vi,vh,vw）以适配响应式场景； - 若需支持 Safari，注意
mix-blend-mode在部分旧版本中对video的兼容性，建议加-webkit-mix-blend-mode前缀（虽现代版本已无需）。
此方案无需 JavaScript、不依赖 Canvas，语义清晰、性能高效，是实现“文字蒙版+动态透出”效果的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
