transition必须写在常态伪元素规则里，不能只写在:hover中；应设于.img-wrap::after并配opacity、rgba背景及:focus-within兼容触控。
transition 必须写在常态伪元素规则里，不能只写在 :hover 中
很多人把 transition 放在 .img-wrap:hover::after 里，结果遮罩一出现就“啪”地弹出来，没有淡入效果。这是因为浏览器只在 hover 状态下才解析该规则，初始透明度变化无法被过渡捕获。
正确做法是把过渡声明放在常态伪元素上：
.img-wrap::after { opacity: 0; transition: opacity 0.3s ease; }.img-wrap:hover::after { opacity: 1; }
这样浏览器从初始 opacity: 0 到 hover 时的 1 才会触发完整过渡。timing function 推荐用 ease-in-out，比纯 ease 更自然；时长控制在 0.25–0.4s 之间，太快显得机械，太慢影响交互反馈。
opacity 和 background 的透明度别混用，优先用 rgba() 控制遮罩色
直接给伪元素设 background: black; opacity: 0.5 看似简单，但会把文字、图标等子内容（如果后续加）也一起变半透——而遮罩本意只是压暗图片背景。
更安全、更可控的方式是用 rgba() 写死背景色透明度：
-
background: rgba(0, 0, 0, 0.6);—— 颜色与透明度绑定，不影响其他层 - 避免用
hsla()或十六进制 + 单独opacity，前者不易直观调参，后者仍有穿透风险 - 若需渐变遮罩（如底部深→透明），改用
linear-gradient(to bottom, rgba(0,0,0,0.7), transparent)
注意：rgba() 中的 alpha 值建议从 0.3 开始试，深图配 0.4–0.6，浅图配 0.2–0.35，再配合文字颜色微调可读性。
移动端 hover 失效？别硬等 touchstart，用 :focus-within 更可靠
在 iOS 和 Android 上，纯 :hover 只在首次点击后短暂触发，之后基本不响应，导致遮罩“点一下才出、再点没反应”。这不是 bug，是浏览器对触屏设备的主动降级策略。
一个轻量兼容方案是启用 :focus-within，配合可聚焦容器：
- 给
.img-wrap加tabindex="0"，让它可获得焦点 - CSS 中补充：
.img-wrap:focus-within::after { opacity: 1; } - 用户点击/触摸图片容器时，焦点进入，遮罩显示；再点空白处或按 Esc 可收起
这个方案无需 JS，兼容 Chrome/Firefox/Safari 68+ 和 Edge 79+，且对屏幕阅读器友好。若需更彻底的触控支持（比如长按显示），才考虑加一层 click 监听切换 class。
遮罩错位或只盖半张图？检查容器尺寸约束和 display 类型
常见现象：遮罩偏右、只覆盖左上角、或者随窗口缩放后消失。根本原因不是 CSS 写错了，而是容器没“锁住”尺寸上下文。
必须确保三点：
- 父容器（如
.img-wrap）有明确宽高，或设display: inline-block+max-width: 100%配合图片自身约束 -
img标签设display: block，否则默认 inline 会引入基线间隙，导致容器高度计算偏差 - 伪元素用
top: 0; left: 0; right: 0; bottom: 0;而非width: 100%; height: 100%，前者严格贴合内容盒，后者受 box-sizing 和 padding 影响
特别注意响应式场景：如果图片用 max-width: 100%，容器也得同步设 max-width 或 width: fit-content，否则伪元素会按 100% 父容器宽度伸展，而图片已缩小——错位就发生了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
