Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

直接在中写文字无效，因其为自闭合标签，html规范禁止嵌套内容；推荐用position:relative+absolute方案实现文字覆盖，语义化场景应使用。

为什么直接在 <img> 里写文字没用

因为 <img> 是自闭合标签，HTML 规范明确禁止在其内部嵌套任何内容（包括文字、<p></p>、<span></span> 等）。浏览器会忽略这些内容，或将其渲染到图片外部，导致布局错乱。这不是 bug，是标准行为。

position: relative + position: absolute 是最通用的方案

这是前端实际项目中最常用、兼容性最好、调试最直观的方式，适合 banner 标题、角标、水印、悬停说明等场景。

• 外层容器（如 <div class="img-wrapper">）必须设 <code>position: relative，否则 absolute 文字会相对于 定位
• <img> 必须显式声明 width 和 height（或用 aspect-ratio + object-fit），否则容器高度塌陷，文字会飘到页面顶部
• 文字元素（<p></p> 或 <div>）设 <code>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 更干净，也省去加载失败处理。

• 容器必须设明确的 width 和 height（或 aspect-ratio），否则背景图不显示
• background-size 推荐用 cover 或 contain，避免默认 auto 导致拉伸或留白
• 文字可读性常被忽略：建议用 ::before 伪元素加半透明白/黑遮罩（如 background: rgba(0,0,0,0.4)），再叠文字
• 坏处很实在：图片无法右键另存为，也不参与无障碍渲染 —— 别用在产品图、证件照、关键信息图上

<figure></figure> + <figcaption></figcaption> 是唯一语义化正确方案

当叠加的文字是标题、说明、版权、作者等关键内容时，必须选这个。它不是“视觉压上去”，而是告诉浏览器：“这段文字描述这张图”。

• <figure></figure> 默认有 margin，建议重置：margin: 0；<figcaption></figcaption> 默认是块级，若需居中覆盖，仍要配合 position: absolute + relative 容器
• 视觉效果和第一种方案一致，但结构意义完全不同 —— 搜索引擎、读屏器、爬虫都按语义解析
• 不要为了“看起来像覆盖”而放弃语义：如果文字是“故宫雪景｜摄于2026年2月”，就该用 <figcaption></figcaption>；如果是“限时折扣”角标，就别用
• 容易被忽略的细节：三个方案都面临相同问题 —— 图片加载完成前容器高度为 0，文字定位失效；响应式切换时位置偏移；多图复用样式时，固定像素值必然错位
真正难的不是怎么写 CSS，而是判断哪段文字该被机器读、哪段只给人看、哪段必须能保存下来 —— 这个决策点，代码写完前就得想清楚。