真正能落地的图片文字面板方案需按用途分：装饰性用 background-image，说明性用 ，交互型才用 absolute 定位； 是自闭合标签，禁止嵌套内容，必须用容器包裹并设 position: relative 才能正确定位文字。
直接用 position: relative + position: absolute 套路做图片文字面板，90% 的人会在加载、响应式或语义化上翻车。真正能落地的方案得按用途分：装饰性面板用 background-image，说明性内容用 <figure></figure>，交互型（带按钮/菜单）才用绝对定位。
为什么不能把文字直接塞进 <img> 标签里
HTML 规范明确禁止在 <img> 标签内嵌套内容——它是个自闭合标签，浏览器会忽略所有内部文本。你写的 <img src="x.jpg">标题 实际渲染时，“标题”会跑到图片外、文档流顶部，甚至被截断。必须用容器包裹，再靠 CSS 控制层叠关系。
- 常见错误现象：
<img>后的文字“飘”到页面最上方，或和下一段内容挤在一起 - 根本原因：没设外层容器的
position: relative，absolute文字就相对于定位了 - 别信“加个
display: block就行”——这解决不了定位基准问题
background-image 方案适合什么场景
当文字只是角标、水印、Banner 标题这类非关键信息，且不需要被搜索引擎收录、不需屏幕阅读器朗读时，background-image 是最轻量、最可控的选择。
- 必须显式设置容器的
width和height，或用aspect-ratio（如aspect-ratio: 16 / 9），否则背景图不显示 -
background-size: cover比contain更常用，但要注意图片裁切——若关键内容在边缘，得配合background-position: center - 文字可读性差？加一层伪元素遮罩：
.panel::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }，再把文字放z-index: 2
用 <figure></figure> + <figcaption></figcaption> 做语义化图文面板
如果文字是标题、版权说明、数据来源等需要被辅助技术识别的内容，硬叠绝对定位就是反模式。<figure></figure> 是 HTML5 原生语义容器，<figcaption></figcaption> 必须是它的直接子元素。
-
<figcaption></figcaption>默认是块级元素，有上下 margin，务必重置：margin: 0 - 要让它“叠”在图上，父级
<figure></figure>得设position: relative，<figcaption></figcaption>设position: absolute，再用top/left或transform: translate(-50%, -50%)居中 - 别给
<figcaption></figcaption>加display: inline——它不是内联文本，强行改会破坏语义结构 - SEO 和读屏软件能准确关联图与说明，这点
div+ 绝对定位永远做不到
绝对定位文字面板容易漏掉的关键样式
很多人写完 top: 20px; left: 20px; 就以为完事了，结果一换设备、一缩放、一加载慢，文字就错位或消失。
- 图片必须设显式宽高（
width/height）或aspect-ratio，否则容器高度塌陷，absolute文字会掉到页面顶部 - 容器要加
box-sizing: border-box，否则 padding/border 会让文字定位偏移 - 文字层建议加
z-index: 1，尤其当页面有 sticky header 或其他浮动模块时，避免被遮盖 - 移动端错位？检查是否用了固定像素值（如
top: 30px），换成top: 10%或top: clamp(1rem, 5vw, 2rem)更稳妥
最常被忽略的一点：图片加载完成前，absolute 文字已经渲染出来了——如果容器没设最小尺寸，文字会悬空在白底上。要么用 min-height 占位，要么监听 img.onload 再显示文字层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
