遮罩层跑出图片外，根本原因是父容器未设position: relative创建定位上下文，或因仅含height: auto的img导致高度坍缩为0，使遮罩失去锚点而相对于body定位；需确保.img-container设position: relative并用aspect-ratio或min-height+padding-top维持高度。
直接用 position: relative + position: absolute + rgba() 背景就能实现，不需要 JS，但必须处理好容器高度坍缩和定位基准问题。
为什么遮罩层总跑出图片外？
根本原因是父容器没创建有效的定位上下文，或自身高度坍缩为 0。
-
.img-container必须设position: relative，否则.overlay会相对于 body 定位 - 容器若只含
<img>（且height: auto），又没设min-height或aspect-ratio，就会坍缩 —— 遮罩层失去锚点，飘到页面顶部或其他容器里 - 移动端 Safari 对
:hover支持弱，首次点击才触发，真机测试不能只看桌面模拟器
怎么让文字面板只在悬停时淡入、居中、不压图？
关键在分层控制：图片不动，遮罩动透明度，文字随遮罩一起出现。
- 遮罩层用
background-color: rgba(0, 0, 0, 0.6)，别用opacity，否则文字也变淡 - 文字居中靠
display: flex+justify-content: center+align-items: center，比line-height或transform更稳 - 悬停动画只过渡
opacity：transition: opacity 0.3s ease；别写transition: all，否则宽高变化会引发重排抖动 - 初始状态设
opacity: 0+pointer-events: none，悬停时设opacity: 1+pointer-events: auto，避免空层拦截点击
响应式下图片宽高不固定，遮罩错位怎么办？
当 <img> 设了 width: 100% 但 height: auto，遮罩层容易撑不满或溢出。
立即学习“前端免费学习笔记（深入）”；
- 给容器加
aspect-ratio: 16 / 9（Chrome 88+、Firefox 89+、Safari 15.4+ 支持），比 JS 计算更轻量 - 兼容老浏览器就用
min-height+padding-top勒出宽高比（例如padding-top: 56.25%对应 16:9） - 遮罩层尺寸写死为
top: 0; left: 0; width: 100%; height: 100%，别依赖transform: scale()撑开 - 如果图片用
object-fit: contain，留白区域也会被遮罩覆盖 —— 此时得用伪元素::before或 JS 动态读取getBoundingClientRect()调整遮罩位置
最易忽略的是容器坍缩和移动端 hover 触发机制 —— 这两点不处理，哪怕 CSS 写对了，效果也大概率在真机上失效或偏移。
