如何在网页上为图片添加标题：简单易懂的 HTML 和 CSS 教程

<div class='image-container'>
  <img src='image.jpg' alt='Image'>
  <div class='image-caption'>Image Name</div>
</div>

2. 使用 CSS 来设置图片和标注文字的样式。可以使用 position 属性来定位标注文字，使用 background-color 属性来设置背景色，使用 padding 和 margin 属性来设置间距。

.image-container {
  position: relative;
  display: inline-block;
}

.image-caption {
  position: absolute;
  top: -20px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px;
  margin: 0;
}

3. 根据需要调整样式和位置，使标注文字与图片对齐。

完整的代码示例：

<div class='image-container'>
  <img src='image.jpg' alt='Image'>
  <div class='image-caption'>Image Name</div>
</div>

<style>
.image-container {
  position: relative;
  display: inline-block;
}

.image-caption {
  position: absolute;
  top: -20px;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 5px;
  margin: 0;
}
</style>