<img>是空元素，禁止嵌套文字，浏览器会忽略其内部文本；可靠方案有三种：装饰性文字用background-image+伪元素，说明性文字用<figure><figcaption>，精确定位用position:relative+absolute叠加。
直接在 <img> 标签里写文字无效，HTML 规范禁止嵌套内容——想让文字“出现在图片上”，本质是布局叠加，不是标签内填字。
为什么 <img> 里加文字不生效
浏览器解析时会忽略 <img src="x.jpg">这里写的文字</img> 中的文本，因为 <img> 是空元素（void element），没有结束标签，也不允许子节点。常见错误现象：文字跑出图片外、完全不显示、或被当作后续段落渲染。
- 检查 Elements 面板，会发现那段文字实际被浏览器自动移到了
<img>外面的 DOM 位置 - 即使强行用 CSS 设置
display: block或content伪元素，也无法改变语义缺失问题 - SEO 和读屏器完全感知不到该文字，对无障碍访问和搜索引擎索引无贡献
三种可靠方案怎么选
选哪种取决于文字是否承载关键信息：
- 纯装饰性文字（如 banner 角标、水印）→ 用
background-image+::before遮罩 + 文字层，DOM 最简，但无语义 - 说明性/标题性文字（如图注、版权信息）→ 用
<figure><img><figcaption>，天然支持 alt、SEO 和读屏器朗读 - 需要精确定位的文字（如居中 slogan、浮动标签）→ 用
position: relative包裹<img>，再用position: absolute叠加文字容器
容易踩的坑：<figure> 默认有 margin，<figcaption> 在部分浏览器里是块级且居左，需显式重置 display 和 text-align；用 background-image 时若父容器没设 width/height 或 aspect-ratio，背景图直接不显示。
立即学习“前端免费学习笔记（深入）”；
position: relative + absolute 实操要点
这是最可控、调试最直观的方式，适合多数运营 Banner 和卡片场景：
- 外层容器（如
<div class="img-wrap">）必须设position: relative，否则absolute文字会相对于 body 定位 -
<img>必须有明确尺寸：要么写死width/height，要么用aspect-ratio+object-fit，否则容器高度塌陷，文字飘到页面顶部 - 文字容器推荐用
top: 50%; left: 50%; transform: translate(-50%, -50%)居中——比只写top: 50%; left: 50%更稳定，缩放时不会偏移 - 移动端错位常因未设
box-sizing: border-box或用了固定像素值（如top: 20px），应改用calc(50% + 1rem)或百分比
临时改图+改文字用开发者工具
仅用于调试或快速验证，刷新即失效：
- 按
F12→ 切换到 Elements 面板 → 右键图片选“检查”，定位到对应<img>标签 - 双击其
src属性值，粘贴新图片 URL（支持本地 file:// 路径，但需浏览器启用相关权限） - 若文字在
<div class="overlay">旧文字</div>里，直接双击文本内容修改，回车确认 - 批量操作可用 Console 执行：
document.querySelector('img').src = 'new.jpg'; document.querySelector('.overlay p').textContent = '新文案';
真正上线前别依赖这种改法——它绕过了资源加载、宽高适配、响应式断点等真实环境约束，容易掩盖布局塌陷或定位失效问题。
