html怎么在图片上面添加文字

作者：′残花败落° 发布日期:2025-11-21 浏览:29

<!DOCTYPE html>
<html>
<head>
    <title>图片上添加文字示例</title>
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="image-container">
    <img src="your-image.jpg" alt="图片" width="300">
    <div class="text">这是图片上的文字</div>
</div>

</body>
</html>

解释说明：

HTML结构:
- div 元素带有类名 image-container，用于包裹图片和文字。
- img 标签用于显示图片，src 属性应替换为实际图片路径。
- div 元素带有类名 text，用于显示图片上的文字。
CSS样式:
- .image-container 设置为相对定位 (position: relative)，使其子元素可以相对于它进行绝对定位。
- .text 设置为绝对定位 (position: absolute)，并使用 top: 50% 和 left: 50% 将其居中，再通过 transform: translate(-50%, -50%) 精确调整到图片中心。
- 文字颜色、字体大小和对齐方式可以根据需要调整。

上一篇：html网页播放器代码

下一篇：html

标签作用