真正可用的响应式半透明遮罩必须用background-color: rgba()配合定位控制，因opacity是继承式透明，会使文字、按钮等子元素同步发虚；::after伪元素+inset: 0是最稳方案，需设position: relative容器、content: ""、inset: 0及overflow: hidden等关键属性。
直接用 opacity 给容器设透明度，会连带文字、按钮一起发虚，这不是遮罩，是视觉污染；真正可用的响应式半透明遮罩，必须用 background-color: rgba() 配合定位控制，且伪元素方案比纯背景更灵活。
为什么不能对图片或卡片直接设 opacity
因为 opacity 是继承式透明：父元素设了 opacity: 0.5，里面所有子元素（哪怕写了 opacity: 1）实际透明度都是 0.5 × 1 = 0.5。常见现象包括：
- 悬停时文字变淡、按钮边框模糊、图标点击反馈弱
-
是替换元素，不支持子节点，你没法把遮罩塞进它内部
- 若用
filter: opacity()，在部分安卓 WebView 中会触发渲染降级，动画卡顿
::after 伪元素 + inset: 0 是最稳的响应式写法
这个组合不依赖 JS 计算尺寸，缩放时自动贴合图片或容器边界。关键点全在 CSS 层级和渲染控制上：
- 外层容器必须设
position: relative，否则::after会相对于body定位，一缩放就飘走 -
::after必须写content: ""，漏了这行，伪元素根本不会渲染 - 用
inset: 0（或top: 0; left: 0; right: 0; bottom: 0）确保完全覆盖，比width: 100%; height: 100%更可靠——后者在display: inline-block或 flex 子项里可能塌高 - 遮罩色必须用
background-color: rgba(0, 0, 0, 0.6)，别用opacity控制透明度，否则边框、阴影也会变淡
移动端和 Safari 下最容易被忽略的三个细节
这些不是“写了就对”，而是“漏了就崩”：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden必须加在容器上，否则圆角遮罩在 Safari 下会直接露出直角边——开发者工具里看不出来，真机上才暴露 - 响应式图片若用
height: auto，父容器必须有明确高度（比如aspect-ratio: 16/9或padding-top: 56.25%），否则::after会因父高未定义而塌陷 - 别给遮罩设
pointer-events: none——如果底部区域要放“查看详情”按钮，它得能响应点击；默认是auto，但某些重置样式表会覆盖它，显式声明更安全
最易被忽略的是：遮罩层没盖住目标元素，往往不是 z-index 数值不够大，而是它的父容器意外创建了新层叠上下文（比如加了 opacity、transform 或 filter），导致子元素的 z-index 被锁死在该上下文内。
