通过 CSS 混合模式（mix-blend-mode: multiply）配合双层文本容器，可实现文字保持白色、矩形区域透明化并透出底层视频的视觉效果。
通过 css 混合模式（`mix-blend-mode: multiply`）配合双层文本容器，可实现文字保持白色、矩形区域透明化并透出底层视频的视觉效果。
在 Web 设计中，有时需要在纯色背景（如黑色）上展示文字，同时让某些特定区域（如单词间的矩形空隙）“挖空”以露出其后动态内容（例如背景视频）。直接使用 background-color: transparent 或 z-index 调整往往无效——因为子元素无法真正“覆盖”或“镂空”父级背景；其渲染仍受限于父容器的绘制上下文。
核心思路是分层叠加 + 混合模式控制可见性：
- 创建两个完全重叠的
.text-block容器（.text-block和.text-block-copy），均定位在相同位置； -
第一层（
.text-block）：仅用于呈现矩形占位符（.rect），设置background-color: black+color: transparent+mix-blend-mode: multiply。此时白色矩形（background-color: white）在乘法混合下会与底层视频产生“透底”效果，而文字因透明不显示； -
第二层（
.text-block-copy）：仅显示白色文字，无背景、无混合，确保文字清晰可读且不受视频干扰； - 底层
<video></video>使用position: absolute; inset: 0; z-index: 1确保始终位于最下层。
✅ 关键代码片段：
.text-block {
position: relative;
z-index: 2;
padding: 30px;
width: 100%;
height: 100%;
background-color: black;
color: transparent;
mix-blend-mode: multiply; /* 让白色 .rect “透出”视频 */
}
.text-block .rect {
background-color: white; /* 白色矩形在 multiply 下变透明，显露视频 */
}
.text-block-copy {
position: absolute;
top: 0; left: 0;
z-index: 2;
padding: 30px;
width: 100%;
height: 100%;
color: white;
background: none;
}
⚠️ 注意事项：
-
mix-blend-mode对父容器有严格要求：不能存在isolation: isolate或transform/filter等创建新层叠上下文的属性，否则混合失效； - 视频需添加
playsinline（iOS）和muted属性以确保自动播放； -
vi单位（viewport inline size）对响应式文字友好，但需注意兼容性（现代浏览器支持良好）； - 所有
.rect元素必须与文字同级嵌套，结构一致性决定布局稳定性。
该方案无需 SVG、Canvas 或 JS，纯 CSS 实现高性能“镂空文字+视频”动效，适用于品牌片头、创意文案等强调视觉层次的场景。
