直接用bg-black/50无遮罩感是因为其编译为background-color，与视频不在同一渲染层，且不参与混合模式；伪元素遮罩需满足content: ""、position: absolute+父relative、inset: 0三条件；Mixin应支持渐变、滤镜、透明度参数及pointer-events: none；移动端需注意Safari渲染延迟和WebView兼容性，并确保视频z-index低于遮罩。
为什么直接用 bg-black/50 叠在视频上没遮罩感
因为全屏背景视频是 <video></video> 元素，不是 CSS 背景图；bg-black/50 编译为 background-color: rgba(0,0,0,0.5)，它只是给容器加一层纯色背景，和视频不在同一渲染层级——视频在底层，这个 background-color 在中层（父容器的背景），文字在顶层，三者堆叠混乱，根本构不成“视频 → 遮罩 → 文字”的视觉链。
更关键的是：background-color 不参与 background-blend-mode，也无法被 mix-blend-mode 正确混合。你加了 mix-multiply，但文字要混合的“背后内容”，其实是父容器的背景色，而不是视频帧本身。
::before 伪元素遮罩层必须满足的三个硬性条件
用伪元素做遮罩是最可控的方式，但容易漏掉基础约束：
-
content: ""必须显式写，空字符串也不能省——否则伪元素不渲染 -
position: absolute必须设，且父容器得是relative或fixed，否则定位失效 - 宽高必须覆盖整个视口：推荐
inset: 0（等价于top:0; right:0; bottom:0; left:0），别只写width: 100%; height: 100%，它受父容器 padding 和 box-sizing 影响
错误示例：.video-wrapper::before { content: ""; width: 100%; height: 100%; } —— 没 position，没 inset，在 flex 容器里大概率错位或消失。
立即学习“前端免费学习笔记（深入）”；
SCSS Mixin 封装遮罩层的关键参数设计
一个实用的遮罩 Mixin 不该只控制颜色，还得预留 blend 模式、透明度衰减、滤镜调色入口：
- 遮罩色建议用渐变而非纯色，比如
linear-gradient(to top, rgba(0,0,0,0.7), transparent 70%)，这样能自然过渡文字可读性 - 如果要叠加色调滤镜（如偏青、暖黄），直接在伪元素上加
backdrop-filter: hue-rotate(15deg)，但注意它只对“伪元素背后的内容”生效——也就是视频，刚好符合需求 - 透明度别硬编码，用参数
$opacity: 0.65，方便不同场景微调；低于0.4在深色视频上易导致文字发虚，高于0.8又压暗过度 - 务必加
pointer-events: none，否则伪元素会拦截鼠标事件，点击不到视频控件或下方按钮
简版 Mixin 示例：
@mixin video-overlay($opacity: 0.65, $direction: to top) {
&::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient($direction, rgba(0, 0, 0, $opacity), transparent);
pointer-events: none;
}
}
调用：.hero-video { @include video-overlay(0.75, to bottom); }
移动端和 Safari 下的两个隐藏雷区
伪元素遮罩在桌面端很稳，但一到真机就出问题，通常卡在这两点：
- iOS Safari 对
position: fixed+inset: 0的伪元素有渲染延迟，尤其配合backdrop-filter时。解法：给伪元素加transform: translateZ(0)强制 GPU 加速 - 安卓部分 WebView（如微信 X5）不支持
backdrop-filter在伪元素上生效，但background渐变仍可用。所以 Mixin 里别把滤镜写死，用@if包一层条件编译，或单独抽成@mixin video-overlay-with-filter
最常被忽略的一点：视频元素本身必须设 z-index: -1 或 position: fixed，否则伪元素虽然盖住了视频，但视频的播放控件（如 Chrome 的右下角音量按钮）仍可能浮在遮罩之上——这不是遮罩的问题，是视频层堆叠顺序没理清。
