伪元素遮罩需父容器设 position: relative 且 ::before 必须设 content: "" 和 top/right/bottom/left: 0 拉满尺寸；透明度应使用 rgba() 而非 opacity，避免继承叠加；移动端需加 transform: translatez(0) 触发合成层。
伪元素遮罩为什么不能直接用 ::before 覆盖背景图
因为 ::before 默认是 inline 元素，不占空间、不响应定位，且层级受父容器 position 限制。如果父元素没设 position: relative，::before 的 position: absolute 会相对于最近的定位祖先（甚至 body）偏移，导致遮罩错位。
- 必须给父容器加
position: relative，否则绝对定位脱标失效 -
::before需显式设content: ""，否则不渲染 - 宽度/高度得靠
top/right/bottom/left: 0拉满，而不是依赖width: 100%—— 后者在无明确宽高父容器里常失效
background-blend-mode 和伪元素遮罩选哪个
这是两类方案：background-blend-mode 是混合图层，适合颜色叠加；伪元素是独立 DOM 层，适合精确控制透明度、动画、交互。别混用——比如给图片容器同时设 background-image 和 ::before 遮罩，结果可能是两层都叠在背景上，反而漏底。
- 纯视觉降噪（如让文字在图上更易读）：优先用
::before+rgba()，可控性强 - 想做渐变融合或色彩滤镜效果：才考虑
background-blend-mode: multiply等，但兼容性差（IE 完全不支持） - 注意：伪元素遮罩无法影响父元素的
background-image以外的内容（比如子图片），它只覆盖自己所在堆叠上下文
遮罩颜色太“脏”？检查这三处透明度设置
常见现象是遮罩后图片发灰、发暗、色偏严重——问题往往不在颜色值本身，而在多层透明叠加。
- 别用
opacity: 0.5：它会让整个伪元素（含可能的文字子节点）都变透明，且不可继承恢复 - 正确做法是用
background-color: rgba(0, 0, 0, 0.4)，alpha 值单独控制遮罩层透明度 - 如果父容器已有
opacity，伪元素会继承并二次叠加，导致实际透明度远低于预期（例如父opacity: 0.8+ 子rgba(0,0,0,0.5)≈ 实际遮罩强度只剩 0.4）
移动端适配时 ::before 遮罩突然消失
大概率是触发了 iOS Safari 的硬件加速 bug：当伪元素没有触发合成层（compositing layer），滚动时可能被裁剪或闪退。
- 加
transform: translateZ(0)或will-change: transform强制创建合成层 - 确保伪元素有明确尺寸（
top/right/bottom/left: 0比width/height: 100%更可靠） - 避免在
::before上写transition动画却不设初始transform，iOS 下可能首帧不渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
