html在图中添加文字代码怎么写

在HTML中，要实现在图片上添加文字，可以通过多种方式来实现，以下是一些常见的方法：

1、HTML的<figcaption>标签：这是一种最简单的方法，可以在图片下方添加文字说明。

<figure>
  <img src="image.jpg" alt="描述文字">
  <figcaption>这里是文字说明</figcaption>
</figure>

2、使用<img>标签的alt属性：这是一种为图片提供文字描述的方法，通常用于图片无法显示时提供文字说明。

<img src="image.jpg" alt="这里是文字说明">

3、使用CSS的::before和::after伪元素：这种方法可以在图片上添加文字，但是需要一些CSS知识。

<div class="image-container">
  <img src="image.jpg" alt="描述文字">
  <div class="text-overlay">这里是文字</div>
</div>

.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  width: 100%;
  height: auto;
}
.text-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
}

4、使用HTML5的<figure>和<figcaption>标签：这是一种语义化的标签，可以提供更好的可访问性。

<figure>
  <img src="image.jpg" alt="描述文字">
  <figcaption>这里是文字说明</figcaption>
</figure>

5、使用CSS的position属性和z-index属性：这种方法可以创建一个文字层，覆盖在图片上。

<div class="image-container">
  <img src="image.jpg" alt="描述文字">
  <div class="text-overlay">这里是文字</div>
</div>

.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  width: 100%;
  height: auto;
}
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  z-index: 10;
}

6、使用HTML的<title>标签：这是一种为图片提供标题的方法，当鼠标悬停在图片上时，会显示标题文字。

<img src="image.jpg" alt="描述文字" title="这里是文字">

7、使用<canvas>标签：这种方法可以绘制文字到画布上，需要一些JavaScript知识。

<canvas id="myCanvas" width="300" height="200"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.fillText('这里是文字', 10, 50);

以上就是在HTML中实现在图片上添加文字的一些常见方法，每种方法都有其适用的场景，可以根据具体需求选择适合的方法。