必须用position: relative容器包裹图片和文字，因img是替换元素不能作为定位上下文；仅给文字设absolute会导致其相对于body定位而偏移；居中需left:50%+transform:translateX(-50%)；遮罩用rgba背景而非opacity；注意堆叠上下文对z-index的限制。
用 position: relative 和 absolute 套住图片与字条
图片上浮一层带文字的半透明色块，本质是「层叠定位」，不是靠 float 或 margin 推出来的。父容器必须设 position: relative，否则子元素用 position: absolute 会相对于整个页面定位，字条就飘到屏幕左上角去了。
实操建议：
- 把
<img>和字条<div>包进同一个<div class="image-overlay">容器里 - 给该容器加
position: relative、display: inline-block（保持图文流式排列） - 字条
<div>设position: absolute，再用top/left往图片上方拉，比如top: 0就贴顶，top: -40px就悬在图片正上方留空隙
用 rgba() 控制半透明彩色背景，别用 opacity
opacity 会让整个字条（包括文字）一起变透明，而你需要的是「背景透、文字不透」。正确做法是用 background-color: rgba(255, 105, 180, 0.7) 这类值——前三个数是 RGB 色值，最后是 alpha 通道（0–1），只影响背景色透明度。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用了
opacity: 0.6，结果文字也发虚，看不清 - 写成
background: #ff69b480（八位十六进制）——部分老浏览器不支持，兼容性差 - 忘记设
color文字色，导致白字压在浅色背景上（比如浅粉配白字）
让字条居中且响应式，关键靠 transform: translateX(-50%)
字条宽度通常不确定（文字长短不同），不能靠固定 left: 50% 再减一半宽来居中。更稳的方式是：left: 50% + transform: translateX(-50%)，浏览器自动按自身宽度计算偏移。
使用场景和细节：
- 如果字条要始终居中于图片顶部，就加在字条样式里：
left: 50%; transform: translateX(-50%); - 若需适配小屏，可配合
max-width: 80%和padding: 8px 12px防止溢出 - 别对图片本身设
transform，否则可能干扰字条定位基准
hover 触发显示/隐藏时，避免闪动或错位
直接用 :hover 控制 visibility 或 opacity 最简单，但要注意两个坑：一是默认状态字条得 visibility: hidden（不是 display: none，否则无法触发 transition），二是过渡动画得加在字条上，不是父容器。
性能与兼容性提示：
- 推荐用
visibility+opacity组合：默认visibility: hidden; opacity: 0;，hover 时visibility: visible; opacity: 1;，再加transition: opacity 0.3s ease - 不用
display: none → block切换，会导致 layout shift（重排），尤其在瀑布流布局里容易跳 - 如果图片加载慢，字条可能先露出来再消失，可在图片加
loading="lazy"并监听onload后再启用 hover 效果
position: relative 是否漏写，以及 rgba() 和 opacity 的混用——前者控背景，后者控整层，选错一个，视觉就全乱了。 
