可通过 html 与css组合实现图文叠加：一、绝对定位 使文字覆盖图片；二、CSS 背景图配合 伪元素 添加文字；三、figure/figcaption 语义化结构（文字在图下）；四、canvas动态绘制文字。
如果您希望在网页中显示图片的同时，在图片上直接叠加文字说明，则需要利用 HTML 与 CSS 的组合方式实现图文叠加效果。以下是几种可行的实现方法：
一、使用 绝对定位 将文字覆盖在图片上
该方法通过将图片和文字放入同一容器，再利用 CSS 的 position 属性使文字层叠于图片上方。容器需设置相对定位，文字元素设为绝对定位，从而精确控制文字位置。
1、创建一个
2、在该容器内插入 标签，设置其 width、height 等属性，并添加 style=”max-width:90%”。
立即学习 “ 前端免费学习笔记（深入）”；
3、在同一容器内添加 或
4、确保文字内容写在该标签内部，例如：示例说明文字。
二、使用 CSS background-image 配合 伪元素 添加文字
该方法将图片设为容器背景，再通过：:before 或：:after 伪元素生成文字内容，适用于静态说明且无需 img 语义化场景。
1、创建一个
2、在 CSS 中定义该 class，设置 background-image: url(‘your-image.jpg’); background-size: cover; width 和 height 值。
3、为该 class 添加：:after 伪元素，设置 content: “ 说明文字 ”; position: absolute; color: white; font-size: 14px;。
4、设置伪元素的 top、left、z-index 等属性，确保文字出现在预期位置，例如：z-index: 10;。
三、使用 figure 和 figcaption 语义化结构（文字位于图片下方）
该方法不实现“图片上”叠加，但符合 html5 语义规范，适用于需要无障碍支持和 seo 优化的图文说明场景，文字默认显示在图片下方。
1、使用
2、在 后添加
3、为
4、若需视觉上靠近图片，可设置
四、使用 canvas 动态绘制文字到图片上
该方法通过 javaScript 获取图片像素数据，在 canvas 画布上先绘制图片，再用 fillText() 方法绘制文字，适用于需运行时生成带标注图片的场景。
1、在 HTML 中添加。
2、使用 javascript 获取 canvas 上下文：const ctx = document.getElementById(‘annotatedCanvas’).getContext(‘2d’);
3、创建 Image对象，设置 src 后在 onload 回调中调用 ctx.drawImage(img, 0, 0);。
4、调用 ctx.fillStyle = ‘white’; ctx.font = ’16px Arial’; ctx.fillText(‘说明文字‘, 20, 30);。
