用CSS :hover实现图片文字遮罩的核心是父容器设position: relative，遮罩层position: absolute覆盖全图，默认opacity: 0/visibility: hidden，hover时变为opacity: 1/visibility: visible，并配合transition实现淡入动画。
用 CSS :hover 实现图片文字遮罩的基本结构
核心思路是把图片和文字放在同一个容器里，让文字默认隐藏或透明，鼠标悬停时通过 :hover 触发样式变化。不需要 JS，纯 CSS 就够用。
关键点在于：图片用 <img>，文字用 <div> 或 <span>，父容器设为 position: relative，遮罩层设为 position: absolute 并覆盖全图。
常见错误是忘记给父容器加定位，导致遮罩层脱离图片位置；或者没设 z-index，文字被图片盖住。
遮罩文字居中且半透明的写法
文字要居中显示、带背景又不挡图，得靠几个基础属性组合：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
display: flex+justify-content: center+align-items: center最稳，兼容现代浏览器 - 背景用
background: rgba(0, 0, 0, 0.6)控制透明度，别用opacity，否则文字也变淡 - 文字颜色选高对比色，比如
color: white，字号适中（font-size: 1rem） - 遮罩层默认
opacity: 0或visibility: hidden，:hover时设为opacity: 1或visibility: visible
用 visibility 可以避免过渡动画卡顿，但 opacity 更适合做淡入效果。
加淡入动画让遮罩更自然
直接显示太生硬，加 transition 是必须的：
- 写在遮罩层上：
transition: opacity 0.3s ease; - 别只写
transition: all，容易误带动画其他属性（比如height突变） - 如果用了
visibility，它不能被过渡，得搭配opacity一起用：先设visibility: hidden; opacity: 0，再:hover设visibility: visible; opacity: 1 - 移动端注意：iOS Safari 对
:hover支持有限，首次点击才触发，真机测试别漏掉
响应式下遮罩错位怎么办
图片宽高不固定时（比如 width: 100%; height: auto），遮罩层容易撑不开或偏移：
- 确保父容器有明确宽高，或用
aspect-ratio（支持 Chrome 88+、Firefox 89+） - 遮罩层尺寸写成
top: 0; left: 0; width: 100%; height: 100%，别用100% x 100%的transform撑开 - 如果图片用
object-fit: cover，遮罩层会按容器尺寸铺满，没问题；但若用contain，留白区域也会被遮罩覆盖，需额外用伪元素或 JS 调整
最保险的做法：所有图片容器统一设固定宽高比，遮罩层用绝对定位 + 百分比尺寸，动画只动透明度，不动布局。
