全屏背景视频遮罩需分三层并控制 stacking context：视频与遮罩必须同级，遮罩用多层背景（如渐变），文字层设 position:relative 和 mix-blend-mode，父容器禁用 isolation:isolate；移动端须加 autoplay muted playsinline。
直接说结论：全屏背景视频加遮罩，z-index 单独用基本无效，mix-blend-mode 也不能靠 bg-black/50 “叠加”出来；必须分三层、控 stacking context、显式声明背景层数量，否则遮罩要么压不住视频，要么文字根本不混合。
z-index 失效不是数字不够大，是 stacking context 断了
视频元素（<video>）默认触发 GPU 合成层，会创建独立 stacking context。即使你给按钮设 z-index: 9999，只要它和视频不在同一 context 下，就无法跨 context 比较层级。
- 给遮罩层或文字层的**直接父容器**加
isolation: isolate，强制它成为新 stacking context 的根 - 确保遮罩
<div>和<video>是同级兄弟节点，不要嵌套在不同祖先里 - 删掉视频上多余的
transform: translateZ(0)或will-change: transform，除非真有性能瓶颈 - 前景文字容器必须设
position: relative（或absolute/fixed），否则z-index完全不生效
mix-blend-mode 不起作用？大概率遮罩层没构成「可混合背景」
mix-blend-mode 混合的是「当前元素的内容」和「它背后所有堆叠上下文中的内容」。但 bg-black/50 编译为 background-color: rgba(0,0,0,0.5)，属于单层 background-color，浏览器不把它当“背景层”参与混合。
- 遮罩层必须用
background: linear-gradient(...), url(...)或bg-gradient-to-t from-black/70 via-transparent to-transparent，显式构造 ≥2 个背景层 - 文字层单独设
mix-multiply（需手动注入），且其父容器不能有isolation: isolate—— 否则会切断混合链 - Tailwind 默认不提供
mix-blend-mode类，得在src/styles.css的@tailwind utilities前加：@layer utilities { .mix-multiply { mix-blend-mode: multiply; } }
移动端自动播放失败，整个遮罩布局就错位
iOS Safari 和新版 Android Chrome 要求：静音（muted）、自动播放（autoplay）、内联播放（playsinline）三者缺一不可。漏一项，视频就不加载，DOM 尺寸为 0，后续基于它的绝对定位（如 absolute inset-0）全部失效。
立即学习“前端免费学习笔记（深入）”；
-
<video>必须同时带autoplay muted playsinline属性 - 别依赖
poster图作为 fallback，它会挡住首帧，影响遮罩对齐；真要用，得等loadeddata事件后 JS 清掉poster - 移动端建议加
object-fit: cover+ 显式width: 100%; height: 100%，避免部分 Chrome 版本误判尺寸
最易被忽略的点：遮罩层的 background 必须是多层（渐变+透明色 or 图片+渐变），单色背景永远触发不了 background-blend-mode；而文字层的 mix-blend-mode 生效前提是——它背后真有东西可混，且没被 isolation 隔断。这三者少一个，遮罩就只是“看起来像”，实际没效果。
