直接在<img>中写文字无效，因其为自闭合标签，HTML规范禁止嵌套内容；推荐用position:relative+absolute方案实现文字覆盖，语义化场景应使用<figure><figcaption>。
为什么直接在 <img> 里写文字没用
因为 <img> 是自闭合标签，HTML 规范明确禁止在其内部嵌套任何内容（包括文字、<p>、<span> 等）。浏览器会忽略这些内容，或将其渲染到图片外部，导致布局错乱。这不是 bug，是标准行为。
position: relative + position: absolute 是最通用的方案
这是前端实际项目中最常用、兼容性最好、调试最直观的方式，适合 banner 标题、角标、水印、悬停说明等场景。
- 外层容器（如
<div class="img-wrapper">）必须设position: relative，否则absolute文字会相对于<body>定位 -
<img>必须显式声明width和height（或用aspect-ratio+object-fit），否则容器高度塌陷，文字会飘到页面顶部 - 文字元素（
<p>或<div>）设position: absolute，并加z-index: 1防止被其他层遮盖 - 居中推荐写法：
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 比纯百分比更稳定，尤其缩放或字体变化时 - 移动端错位常见原因：没设
box-sizing: border-box，或用了固定像素值（如top: 20px），应改用calc()或百分比
用 background-image 替代 <img> 适合纯装饰性文字
当你不需要语义化（读屏器不读、SEO 不索引）、不关心右键保存图片、且文字只是 slogan/角标/水印时，这个方案 DOM 更干净，也省去加载失败处理。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 容器必须设明确的
width和height（或aspect-ratio），否则背景图不显示 -
background-size推荐用cover或contain，避免默认auto导致拉伸或留白 - 文字可读性常被忽略：建议用
::before伪元素加半透明白/黑遮罩（如background: rgba(0,0,0,0.4)），再叠文字 - 坏处很实在：图片无法右键另存为，也不参与无障碍渲染 —— 别用在产品图、证件照、关键信息图上
<figure> + <figcaption> 是唯一语义化正确方案
当叠加的文字是标题、说明、版权、作者等关键内容时，必须选这个。它不是“视觉压上去”，而是告诉浏览器：“这段文字描述这张图”。
立即学习“前端免费学习笔记（深入）”；
-
<figure>默认有 margin，建议重置：margin: 0；<figcaption>默认是块级，若需居中覆盖，仍要配合position: absolute+relative容器 - 视觉效果和第一种方案一致，但结构意义完全不同 —— 搜索引擎、读屏器、爬虫都按语义解析
- 不要为了“看起来像覆盖”而放弃语义：如果文字是“故宫雪景｜摄于2026年2月”，就该用
<figcaption>；如果是“限时折扣”角标，就别用 - 容易被忽略的细节：三个方案都面临相同问题 —— 图片加载完成前容器高度为 0，文字定位失效；响应式切换时位置偏移；多图复用样式时，固定像素值必然错位
