应使用+实现语义化图下文字，figcaption为figure唯一直接子元素，天然响应式、自动换行；图片内叠加文字则需position: relative/absolute配合clamp()字体和遮罩层确保可读性。
响应式图片加文字标签，不能只靠 alt，也不能硬写死像素值——关键得让文字尺寸、位置、换行都随图片缩放同步变化。
用 figure + figcaption 做语义化底部说明
这是最稳妥的“图下文字”方案，浏览器默认渲染为块级、居中、字号略小，且天然支持响应式行为。
-
figcaption是figure的直接子元素，必须且只能有一个；它不依赖 CSS 就能随图片宽度收缩，文字自动换行 - 别给
figcaption设固定width或max-width，否则小屏下会截断；让它自然继承父容器宽度 - 如果文字过长导致行高撑开间距，加
line-height: 1.4和margin: 0.5em 0比设固定height更安全 - 旧版 IE8 不支持，但现代项目基本不用考虑兼容性问题
示例结构：
<figure> @@##@@ <figcaption>图1：晴天午后，家猫观察窗外飞鸟</figcaption></figure>
用 position: relative + absolute 实现图片内叠加文字
当文字要浮在图上（比如标题 banner、角标、水印），必须让文字定位基准始终与图片视觉尺寸一致——不是靠 img 自身缩放，而是靠包裹容器的宽高控制。
- 把宽度控制逻辑从
img移到外层div上，例如width: 80%或max-width: 600px，再让img设width: 100% -
img必须设display: block，否则底部会留白（baseline 对齐导致） - 文字元素用
position: absolute，但 top/left 值建议用rem或em，避免小屏下文字溢出；如需居中，用top: 50%; left: 50%; transform: translate(-50%, -50%) - 别忘了加
z-index: 1，否则可能被其他层遮盖
常见坑：img 没设 height: auto 或 aspect-ratio，导致容器高度塌陷，文字直接飘到页面顶部。
srcset + sizes 不配对，文字就容易错位
响应式图片加载哪张，直接影响实际渲染尺寸；如果浏览器选了远大于显示区域的图（比如 1200w 图在 320px 宽屏幕上渲染），而你的文字定位是按 320px 设计的，就会严重偏移。
-
sizes必须存在，且值要和真实 CSS 布局一致；例如卡片内图片实际占宽 300px，sizes就不能写成100vw - 检查 DevTools Network 面板，看请求头里有没有
Sec-CH-DPR或Width，没有说明响应式逻辑根本没触发 - 文字元素若用了
font-size: clamp(1rem, 4vw, 1.5rem)，比纯rem或px更可靠——它能随视口宽度平滑缩放
文字可读性常被忽略：背景对比与遮罩
图片明暗不一，纯白或纯黑文字在某些区域根本看不清。这不是样式细节，是可用性硬伤。
- 别只靠文字阴影（
text-shadow），它在低分辨率屏上模糊、高 DPR 下又太细 - 推荐用伪元素加半透明白/黑遮罩：
.container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 0; } - 遮罩层必须设
z-index低于文字但高于图片，顺序错了就白搭 - 如果图片是装饰性（如 banner 背景），直接用
background-image替代img标签，DOM 更干净，也省去alt和加载失败处理
真正难的不是让文字“出现”，而是让它在任意设备、任意图片、任意缩放比例下都清晰、对齐、不溢出——这需要把文字当作和图片同等重要的响应式单元来对待，而不是“加个 p 标签完事”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
