响应式图片遮罩不能直接用img+opacity，因会连带同级文字按钮变淡且img不支持子节点；应采用position: relative容器+::after伪元素方案，确保遮罩随图片缩放自动贴合。
响应式图片遮罩为什么不能直接用 img + opacity
直接给 <img> 设 opacity 或 filter: opacity() 会连带文字、按钮等所有子内容（哪怕它们是同级元素）一起变淡，但遮罩本意只是“压暗图片背景”，不是让整个卡片发灰。更麻烦的是，<img> 是替换元素，不支持子节点，你没法把文字塞进它里面；而一旦文字和图片不同级，层级就容易错乱。
position: relative 容器 + ::after 伪元素是响应式遮罩的基线方案
这个组合能保证遮罩随图片缩放自动贴合，不用 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控制透明度，否则边框、阴影也会变淡 - 如果图片有圆角，容器要同时设
border-radius和overflow: hidden，且::after也得写相同值的border-radius，否则直角边缘会漏出原图
底部文字条遮罩需要单独控制高度和定位
常见需求是只遮住图片底部 30px 区域，上面留白显示标题。这时候不能靠 inset: 0 全盖，得用精确控制：
- 伪元素设
bottom: 0; width: 100%; height: 30px，而不是靠top和计算 - 加
transform: translateZ(0)强制 GPU 加速，尤其在安卓 WebView 或旧版 Safari 上，否则悬停动画会卡顿或闪烁 - 文字必须和图片同级（都在容器内），并显式设
position: relative和z-index: 2；遮罩伪元素保持默认层级（不写z-index），否则文字会被盖住 - 别给遮罩设
pointer-events: none—— 如果底部区域要放“查看详情”按钮，它得能响应点击
移动端和 Safari 下最容易被忽略的三个细节
这些不是“写了就对”，而是“漏了就崩”：
-
overflow: hidden必须加在容器上，否则圆角遮罩在 Safari 下会直接露出直角边，开发者工具里看不出来，真机上才暴露 - 响应式图片若用
height: auto，父容器必须有明确高度（比如aspect-ratio: 16/9或padding-top: 56.25%），否则::after高度会塌为 0 - 如果用
object-fit: cover，遮罩伪元素会自然贴合可视区域；但若图片是background-image，就得同步设background-size和background-position，否则遮罩和图片错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
