html中内嵌文字无效，稳定方案有三种：1. position: relative+absolute（通用兼容）；2. background-image（装饰性，无seo/无障碍）；3. +（语义化关键内容）。

直接用 `` 标签内部写文字是无效的，HTML 规范禁止在 `` 中嵌套内容。真正能稳定生效的方式只有三种：用 `position: relative` + `position: absolute` 布局、用 `background-image` 替代 ``、或用 `

` + `

` 做语义化叠加。选哪种取决于文字是否需要被读屏器识别、是否要右键保存图片、以及是否参与 SEO。

用 position:relative + absolute 实现文字覆盖

这是最通用、兼容性最好、也最容易调试的方案，适合标题 banner、角标、水印等需要精确控制位置的场景。

• 外层容器（比如 <div>）必须设 <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%)，比纯 top: 50%; left: 50% 更稳定，尤其在缩放时
• 移动端错位常见原因是没设 box-sizing: border-box，或用了固定像素值（如 top: 20px），应改用百分比或 calc()

用 background-image 替代 标签

适合纯装饰性文字，比如 banner 图上的 slogan、卡片角标、非关键水印。好处是 DOM 简洁，不用处理加载失败、alt 属性、宽高比等问题。


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)），再放文字提升可读性
• 坏处很明显：图片无法右键另存为，也不参与语义化渲染，SEO 和无障碍支持为零

用

+

做语义化叠加

当文字是说明、标题、版权信息等关键内容时，必须选这个。它不是“视觉上压上去”，而是让浏览器和读屏软件知道“这段文字描述这张图”。

• <figcaption></figcaption> 默认是块级元素且带上下 margin，要叠上去得先重置：margin: 0
• 父级 <figure></figure> 设 position: relative，<figcaption></figcaption> 设 position: absolute
• 居中逻辑和第一种方式一致，仍推荐 top: 50%; left: 50%; transform: translate(-50%, -50%)
• 注意：某些旧版 Safari 对 <figure></figure> 的默认样式支持不一致，建议显式重置 display 和 margin

容易被忽略的细节

三个方案都绕不开的共性问题：图片加载完成前，容器高度可能为 0，导致文字定位失效；响应式变化时，文字位置偏移；多图复用样式时，用固定像素值会导致错位。

• 加载时机问题：不要依赖图片自然加载完成后再计算位置，优先用 CSS 自适应方案（如视口单位 vw/vh、calc()、transform）
• 响应式适配：避免在 @media 里重复整套定位逻辑，用相对单位一次写对更可靠
• 文字可读性：深色图上白字、浅色图上黑字不够保险，加一层 rgba() 遮罩才是生产环境标配
• z-index 不是万能的：如果父容器有 transform、filter 或 will-change，会创建新的层叠上下文，z-index 只在该上下文内生效