正文

html在图片上如何添加文字

优站号
优站号 V管理员 /0 评论 /19 阅读
0307
欧意国内注册

我们需要创建一个包含图片的<div>元素，并为其设置一个相对定位，我们创建一个包含文字的<div>元素，并为其设置绝对定位，使其相对于图片定位。

以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
  <img src="your_image.jpg" alt="Image" width="300" height="200">
  <div class="text">这是一段文字</div>
</div>
</body>
</html>

在这个示例中，.container类用于设置图片的相对定位，.text类用于设置文字的绝对定位。top: 50%;和left: 50%;将文字放置在图片的中心，transform: translate(-50%, -50%);用于确保文字的左上角与图片的中心对齐。

请注意，你需要将your_image.jpg替换为你的图片路径，将这是一段文字替换为你想要显示的文字。