最常踩的坑是父容器未设 position: relative 导致绝对定位文字飘走；需共用父容器并设 position: relative 和 min-height；遮罩用 rgba() 而非 opacity；居中优先 flex；移动端 hover 不可靠，应改用 js 切换类或点击交互。

父容器没设 position: relative，文字就飘走

这是最常踩的坑：文字一加上去，不是盖在图片上，而是飞到页面顶部或左上角。根本原因是 position: absolute 的元素会找「最近的已定位祖先」，如果父容器没设 position: relative，它就一路往上找到 去了。

必须确保文字和图片共用同一个父容器，且该容器有：

• position: relative
• min-height 或能撑开高度的内容（比如图片加载中、尺寸不固定时，min-height: 320px 比 height 更稳）
• 别把 <img> 和文字 <div> 放在不同层级的 <code><div> 里 <h3>遮罩层用 <code>background: rgba()，别碰 opacity

  想让文字背景半透明但文字本身清晰？直接给文字容器设 opacity: 0.6 是错的——整个文字（包括字体）都会变淡，可读性暴跌。

  正确做法是分开控制：

  • 遮罩层用 background: rgba(0, 0, 0, 0.6)（黑底 60% 透）
  • 文字颜色设为 color: white，保持 100% 不透明
  • 如果遮罩层还包含按钮或链接，记得给可点击部分单独加 pointer-events: auto

  文字居中或贴边，flex 比 transform 更少出错

  要文字水平垂直居中？很多人写 top: 50%; left: 50%; transform: translate(-50%, -50%)，但一旦父容器没高度、图片没加载完，就容易偏移。

  

  html-deploy

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

  下载

  更稳的方案是给遮罩层设：

  • display: flex
  • justify-content: center
  • align-items: center

  要是文字必须贴底部（比如图注），就改用 bottom: 0; left: 0; width: 100%，再配合 padding 控制内边距。

  移动端 :hover 不可靠，首次点击才触发

  纯 CSS 的 :hover 在 iPhone / Android 真机上基本等于“点一次才生效”，第二次点才消失——这不是 bug，是浏览器对触屏设备的默认行为。

  如果卡片要兼顾手机用户，别硬撑纯 CSS 方案：

  • 加一个 .is-hovered 类，用 JS 在 touchstart 和 click 时切换
  • 或者直接放弃悬停逻辑，改用点击展开（details/summary 或 JS 控制显隐）
  • 伪元素 ::before 遮罩在移动端同样受此限制，不能指望它像桌面端一样响应灵敏

  真正容易被忽略的，是「容器高度坍缩」和「移动端 hover 语义失效」这两点。前者让定位失准，后者让交互预期落空——它们都不报错，但效果全崩。