应始终让覆盖层存在且初始 opacity: 0，用 transition: opacity 实现平滑叠加；父容器需 position: relative，覆盖层 position: absolute 并匹配图片 border-radius；移动端改用 :active 或 JS 切换 class，并设 pointer-events: none 避免干扰。
hover时图片上叠加半透明黑色层但不闪动
直接加 transition 在 :hover 里没用，因为初始状态没定义覆盖层，浏览器没法插值动画。必须让覆盖层始终存在，只是初始透明度为 0。
- 用
::after或<div> 做覆盖层，定位在图片上方，<code>opacity: 0+transition: opacity 0.3s - 父容器设
position: relative，覆盖层设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别用
rgba(0,0,0,0)初始值——某些旧版 Safari 对 rgba 动画支持差，统一用opacity控制更稳 - 只用
opacity过渡，深色层背景固定为rgba(0, 0, 0, 0.8)，靠透明度变化“显隐”它 - 如果真要调深浅，改两套 class：
.overlay-light和.overlay-dark，用transition: background-color 0.3s——但仅限纯黑/灰，且需预设好色值 - 避免在
:hover里写background: rgba(...)同时又设transition，多数情况会失效 - 给覆盖层也加相同
border-radius，和图片一致（如border-radius: 8px） - 更稳妥：把图片和覆盖层都包进一个
div，给这个容器设overflow: hidden和border-radius，覆盖层在里面自由定位 - 别依赖
clip-path模拟圆角——IE 不支持，且和transition组合易触发重绘异常 - 对移动端，用
:active替代:hover，并加touch-action: manipulation减少延迟 - 更可靠方案：用 JS 监听
touchstart/touchend切换 class，比如.is-hovered，CSS 里写.img-container.is-hovered .overlay { opacity: 0.7 } - 别指望
@media (hover: hover)完全区分设备——iPadOS 下这个媒体查询常返回 true，但行为仍接近触摸
用rgba控制深色强度但保持过渡平滑
rgba() 本身不能被 transition 直接驱动（比如从 rgba(0,0,0,0.2) 到 rgba(0,0,0,0.8)），浏览器不识别颜色通道的渐变插值，容易卡顿或跳变。
图片带圆角时覆盖层边缘溢出
图片设了 border-radius，但覆盖层是矩形绝对定位，会盖住圆角外的空白，视觉上像“切掉一块”。
移动端 hover 失效或响应延迟
手机没有真正 hover，tap 后会触发一次 pseudo-class，但不会持续，导致覆盖层一闪就消失。
立即学习“前端免费学习笔记（深入）”；
最常漏的是覆盖层没设 pointer-events: none，结果鼠标悬停在层上时，图片本身的 :hover 反而失效；或者忘了给父容器加 position: relative，导致覆盖层定位飘走。这些细节一错，整个效果就断掉。
