纯CSS实现图片hover半透明遮罩的正确做法是：父容器设position: relative，遮罩层用position: absolute+rgba背景+opacity过渡，避免直接改img透明度或使用display:none。
图片 hover 时显示半透明遮罩，用 CSS 就够了
不需要 JS，纯 CSS 即可实现：鼠标移上去，图片上浮一层带文字/图标的半透明色块。关键在 :hover + 定位 + opacity 或 background-color 的 rgba 值。
常见错误是遮罩层没设 position: absolute，或父容器忘了加 position: relative，导致遮罩乱飘；还有人直接给 img 设 opacity，结果整张图都变透明，文字也看不清。
- 父容器必须设
position: relative，否则absolute遮罩会相对于 body 定位 - 遮罩层建议用
div包裹文字，不要直接操作img的透明度 - 用
rgba(0,0,0,0.6)比opacity: 0.6更安全——前者只影响背景，后者会让子元素（比如文字）也变透明
HTML 结构怎么搭才不踩坑
结构松散或嵌套错位，hover 效果就失效。最稳的写法是：一个外层 div 作容器，里面放 img 和遮罩 div，两者并列、同级。
别这么写：<img src="..."><div class="overlay">文字</div> —— 如果没包外层容器，.overlay 默认是块级且脱离图片流，hover 一触发就“跳”。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div class="img-container"> <img src="photo.jpg" alt="示例图"> <div class="overlay"><p>这是描述</p></div> </div>
-
.img-container必须设position: relative -
.overlay设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 图片不用设宽高，但建议加
display: block消除底部默认空白
遮罩怎么让它只在 hover 时出现
核心就是用 .img-container:hover .overlay 控制显隐，而不是给 .overlay 单独设 display: none/block —— 后者会破坏 transition 动画。
推荐用 opacity + transition 实现淡入，比 visibility 更顺滑，也兼容更多场景（比如要加缩放、位移）。
- 初始状态：
.overlay { opacity: 0; transition: opacity 0.3s ease } - 悬停状态：
.img-container:hover .overlay { opacity: 1 } - 如果想加位移（比如从下往上浮），可以配合
transform: translateY(0)和transform: translateY(-10px) - 避免用
display: none，它无法做过渡动画
移动端点击区域和透明度兼容性要注意什么
iOS Safari 对 :hover 支持很弱——第一次点击才触发 hover，第二次才取消。所以纯 :hover 在手机上基本不可靠。
如果项目需兼顾移动端，要么加一层 JS 监听 touchstart 切换 class，要么改用 :active 做点击反馈（但体验不如 hover 自然）。更实际的做法是：PC 端用 hover，移动端默认显示遮罩，或用按钮显隐控制。
-
rgba()在 IE9+ 完全支持，不用 fallback；但 IE8 及以下不认 rgba，得额外加filter: alpha(opacity=60) - 若遮罩里有文字，记得设
color: white和足够对比度，别被暗色背景吞掉 - 图片加载慢时，遮罩可能先闪一下再对齐——给
.img-container设固定宽高可缓解
hover 遮罩看着简单，真正稳定跑在各种设备上，关键是父容器定位、opacity 和 rgba 的选择、以及移动端降级策略——这三处漏一个，效果就断在用户手里。
