怎么在图片上显示文字html代码

在网页设计中，图片上显示文字是一种常见的做法，它可以让页面更加美观，同时也能起到强调、说明的作用，使用HTML实现这一功能非常简单，下面,我将详细介绍如何在图片上显示文字的HTML代码方法。

我们需要使用一个HTML标签——<img>，它是用来插入图片的，而要在图片上显示文字，我们可以借助<div>标签，将图片和文字都放在这个容器里，通过CSS样式设置,实现文字在图片上的显示效果。

以下是具体的代码实现步骤：

创建一个HTML文件,并在其中编写以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上显示文字示例</title>
    <style>
        .image-container {
            position: relative;
            width: 500px; /* 设置图片容器宽度 */
            height: 300px; /* 设置图片容器高度 */
        }
        .image-container img {
            width: 100%; /* 设置图片宽度 */
            height: 100%; /* 设置图片高度 */
        }
        .text {
            position: absolute;
            top: 50%; /* 设置文字垂直居中 */
            left: 50%; /* 设置文字水平居中 */
            transform: translate(-50%, -50%); /* 使文字居中 */
            color: white; /* 设置文字颜色 */
            font-size: 24px; /* 设置文字大小 */
            text-align: center; /* 设置文字居中对齐 */
        }
    </style>
</head>
<body>
<div class="image-container">
    <img src="example.jpg" alt="示例图片">
    <div class="text">这里是图片上的文字</div>
</div>
</body>
</html>

代码解析：
- <div class="image-container">：创建一个图片容器,用于包裹图片和文字。
- <img src="example.jpg" alt="示例图片">：插入一张图片，src属性表示图片路径，alt属性表示图片无法显示时的替代文字。
- <div class="text">这里是图片上的文字</div>：创建一个文字容器,用于显示图片上的文字。
CSS样式解析：
- .image-container：设置图片容器的宽度和高度。
- .image-container img：设置图片的宽度和高度,使其充满整个容器。
- .text：设置文字的位置、颜色、大小和对齐方式。position: absolute;表示绝对定位，top: 50%;和left: 50%;表示将文字的左上角定位在图片容器的中心位置，transform: translate(-50%, -50%);则是将文字的中心点移动到图片容器的中心位置。