用<div>容器+::after伪元素实现遮罩最可靠：容器需position: relative和overflow: hidden，伪元素设content: ""、inset: 0及rgba背景，图片设display: block；Safari下需translateZ(0)防闪烁。
直接用 <div> 叠加 + rgba() 背景就能实现，不需要 JS，也不用碰 opacity——后者会把文字、按钮一起变淡，完全不是遮罩本意。
为什么不能给 <img> 直接加 opacity 或 background-color
因为 <img> 是替换元素：background-color: rgba(0,0,0,0.5) 完全不生效；opacity: 0.5 会让整个图片及其上所有子内容（比如标题、按钮）都变半透明，遮罩就失去了“只压图、不压字”的作用。更麻烦的是，<img> 默认是内联元素，没设 display: block 时，定位和 hover 都可能失效。
必须用容器 + ::after 伪元素的三步写法
这是最干净、兼容性好、不污染 HTML 的方案：
- 外层
<div class="img-container">必须设position: relative，否则伪元素会相对<body>定位，飘走 -
.img-container::after要写content: ""，漏了这行，伪元素根本不渲染 - 伪元素用
top: 0; left: 0; width: 100%; height: 100%（或inset: 0）确保严丝合缝盖住图片，别依赖“自动撑开” - 背景用
background-color: rgba(0, 0, 0, 0.6)，alpha 值建议控制在 0.3–0.8 之间：太低压不住图，太高吞掉文字细节
圆角图片加遮罩，overflow: hidden 是关键
如果图片本身有 border-radius（比如头像、卡片图），遮罩边缘会漏出直角——除非你同步处理三处：
立即学习“前端免费学习笔记（深入）”；
- 容器（外层
<div>）设border-radius: 12px和overflow: hidden（缺一不可） - 伪元素也写相同的
border-radius: 12px -
<img>设display: block，避免底部留白破坏圆角裁剪 - 移动端加
transform: translateZ(0)触发 GPU 加速，防止 Safari 下圆角遮罩闪烁或错位
遮罩层要挡点击还是放穿透？pointer-events 别乱设
新手常误写 pointer-events: none 在遮罩上，结果鼠标直接穿过去点到下面——这不是遮罩，是隐形。真实需求分两种：
- 遮罩只是视觉压暗，不响应任何操作（比如底部文字说明），就设
pointer-events: none - 遮罩本身要响应点击（比如点它关闭弹窗），保持默认
pointer-events: auto即可 - 如果既要“挡住底层”，又不想自己被点，不能靠
pointer-events: none——那等于没挡。得用 JS 拦事件，或者换思路：加一层background: transparent的空层再拦截
真正容易翻车的地方不在代码行数，而在容器是否设了 overflow: hidden、伪元素有没有 content: ""、以及 Safari 下圆角遮罩是否因缺少 translateZ(0) 而崩边——这些细节，只有打开开发者工具缩放到 100% 才看得清。
