用 position: relative + absolute 实现文字叠在图片上需父容器设 relative，文字设 absolute 并配合 top/left 和 transform 定位，图片保持正常流；文字用 rgba() 控制透明度，避免 opacity 影响布局；响应式下优先用 transform 居中或边缘定位，确保兼容性与可访问性。
用 position: relative + absolute 实现文字叠在图片上
直接把 <p> 或 <span> 放在 <img> 后面不会自动叠上去，必须靠定位。父容器得设 position: relative，文字元素设 position: absolute 并用 top/left 调位置。
- 图片本身不能设
position: absolute，否则会脱离文档流，父容器高度塌陷 - 文字元素要放在同一父容器内，且写在
<img>标签后面（顺序不影响叠层，但语义更清晰） - 用
z-index控制层级：文字默认比图片高，但若加了其他绝对定位元素，需显式设z-index: 1
半透明文字用 rgba() 或 opacity，别混用
rgba(0, 0, 0, 0.7) 是最稳的选择——只让文字颜色变透明，不影响文字内部布局；而 opacity: 0.7 会让整个文字元素（包括 padding、背景等）都变透明，还可能影响子元素。
- 避免用
background-color: rgba(255,255,255,0.5)给文字加底色再配深色字，除非真需要文字遮罩效果 - 字体颜色推荐用浅色（如
rgba(255,255,255,0.9)），确保在暗部区域也清晰可读 - 别对
<img>设opacity，否则整张图变淡，失去“文字叠加”本意
响应式下文字位置容易跑偏，要用 transform 替代固定 top/left
写死 top: 20px; left: 20px 在不同尺寸图片上会错位。更可靠的方式是用 top: 50%; left: 50% 配合 transform: translate(-50%, -50%) 居中，或用 bottom: 1rem; right: 1rem 做右下角水印式定位。
- 百分比 top/left 基于父容器高度宽度计算，不是图片自身尺寸，所以父容器必须有明确宽高（可用
width: 100%+height: auto配合图片 intrinsic size） - 如果图片宽高不固定（比如用户上传图），建议用
object-fit: cover+aspect-ratio锁定容器比例，再定位文字 - 移动端小屏慎用
font-size: 2rem，改用vw或clamp()保证可读性
IE 不支持 object-fit，老项目得加 fallback
如果必须兼容 IE11，<img> 无法用 object-fit: cover 填满容器，此时推荐用背景图方案：<div style="background-image: url(...); background-size: cover"，再把文字放里面。但注意：背景图无法被屏幕阅读器识别，SEO 和可访问性受损。
立即学习“前端免费学习笔记（深入）”；
- 纯 img 方案在 IE 中可用
width: 100%; height: auto+max-width控制，文字定位改用bottom: 0靠底部，比居中更稳定 - 若用 background-image，记得加
aria-label或隐藏的<img>兜底，不然视障用户看不到图内容 - 现代项目直接忽略 IE，但上线前务必用真实设备验证文字是否始终落在预期区域——尤其 iOS Safari 的缩放行为有时会让 absolute 定位偏移
position: relative，图片 display: block; width: 100%，文字 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.9)。其余全是围绕这三行打补丁。 
