纯css实现图片悬停遮罩需满足：父容器设position: relative；遮罩层用position: absolute+rgba背景+opacity过渡；文字居中用flex；链接包裹整个容器并设pointer-events:none。

直接用 :hover + 定位 + opacity 过渡就能实现，不需要 JS；但结构错、定位漏、透明度用错位置，效果就全崩。

父容器必须设 position: relative

遮罩层用 position: absolute，它会相对于最近的「已定位祖先」找位置。没设 position: relative 的父容器，遮罩就会飞到 顶层去，完全不贴图。

• 必须包裹图片和遮罩文字在同一个 <div class="img-container"> 里 <li> <code>.img-container 样式里一定要有 position: relative
• 别把 <img> 和 <div class="overlay"> 拆开写在不同父级下 <h3>遮罩层要用 <code>rgba() 背景，别碰 opacity 整体

  opacity: 0.6 会让遮罩里的文字也变半透明，对比度一塌糊涂；background: rgba(0,0,0,0.6) 只影响背景色，文字保持 100% 清晰。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • 遮罩层默认写 opacity: 0，:hover 时设为 opacity: 1
  • 过渡只加在 opacity 上：transition: opacity 0.3s ease，别写 transition: all
  • 文字居中用 display: flex; justify-content: center; align-items: center 最稳，比 transform: translate(-50%, -50%) 少踩坑

  整张图要能点击？链接得包住整个容器

  如果只给 <img> 加 <a></a>，那遮罩层一盖上去，图片区域就点不动了——因为绝对定位元素默认会拦截鼠标事件。

  • 把 <a></a> 标签作为最外层容器，里面放 <img> 和 <div class="overlay"> <li>给 <code>a 设 display: block; width: 100%; height: 100%，确保热区完整
  • 遮罩层加 pointer-events: none，让它不抢点击；文字部分再单独加 pointer-events: auto（如需文字可点）

  移动端真机上 :hover 不可靠，首次点击才触发；如果卡片要兼顾触屏，得额外加 touchstart 类或用 JS 切换类名——纯 CSS 方案在这里就是有硬伤，别硬撑。