最简写法是给图片容器设background: rgba(0,0,0,0.4)并配合position: relative；需注意z-index层级、伪元素content必写、移动端加transform: translateZ(0)触发GPU渲染。
图片上加半透明遮罩层的最简写法
直接给图片容器加 background 叠一层 rgba() 色值，比用伪元素或额外标签更轻量、更可控。
- 不要把
opacity加在<img>标签上——它会让图片本身也变透明，文字内容跟着模糊 - 容器必须设为
position: relative，否则子元素（如文字）无法精准定位到图片区域 -
rgba(0, 0, 0, 0.4)是常用蒙层色：黑底 + 40% 透明度，足够压暗背景又不吞掉细节
用伪元素 ::before 实现响应式蒙层
当需要蒙层只覆盖图片可视区域（比如带圆角、object-fit 缩放后的图片），伪元素比纯 background 更可靠。
- 给图片父容器设
position: relative，再用::before绝对定位铺满 - 伪元素必须设
content: ""，否则不渲染；宽高用100%，不是inherit - 如果图片用了
object-fit: cover，伪元素会自然跟随裁剪区域，而 background 可能溢出边框
.img-container {
position: relative;
width: 300px;
height: 200px;
}
.img-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
蒙层与文字层级冲突怎么办
蒙层盖住文字，本质是 z-index 顺序没理清，不是透明度问题。
- 伪元素默认 z-index 为 auto，和图片同层；文字需显式设
position: relative+z-index: 1 - 如果用 background 方式，文字直接放在容器内即可，无需额外定位——它天然在 background 之上
- 避免给蒙层设
z-index: -1：IE 下可能失效，且会脱离文档流导致点击穿透
移动端适配时容易漏掉的坑
蒙层在 iOS Safari 或安卓微信里“消失”或“错位”，大概率是触发了硬件加速边界或缩放逻辑。
立即学习“前端免费学习笔记（深入）”；
- 给蒙层元素加
transform: translateZ(0)或will-change: transform，强制启用 GPU 渲染 - 避免在蒙层上监听
touchstart事件却不preventDefault——部分安卓浏览器会误判为缩放手势 - 如果父容器用了
width: 100vw，蒙层可能在横屏时被截断；改用width: 100%更稳妥
