` 标签则用于添加文字。
2. 使用CSS添加样式
在HTML中插入文字之后，接下来用CSS为其添加样式，使其在图片上正确显示。以下是一个简单的CSS样式，实现了文字在图像中央覆盖的效果：
在上面的CSS代码中，`.image-container` 采用了 `position: relative;`，这样可以为内部的绝对定位元素提供基准。`.text-overlay` 的 `absolute` 定位使其能覆盖在图像上，并通过 `transform` 属性实现了居中显示。
3. 完整示例及效果预览
结合上述HTML和CSS代码，这里提供了一个完整的示例。你可以将以下代码复制到你的HTML文件中，并查看效果：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在图片上添加文字示例</title>
<style>
.image-container {
position: relative;
width: 300px;
}
.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: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="image-container">
<img src="your-image-url.jpg" alt="描述性文字">
<div class="text-overlay">你的文字在这儿</div>
</div>
</body>
</html>
替换 `your-image-url.jpg` 为你自己的图片链接。打开HTML文件即可查看效果，你会发现文字清晰地显示在图片的中央。
4. 扩展功能及注意事项
上面的例子展示了基本的文字覆盖功能，但你可以根据需要进行更复杂的调整。，你可以添加不同的字体、字体大小、阴影效果等。还可以使用媒体查询来确保在不同设备和屏幕尺寸上良好的响应效果。
在应用这些样式时，需要注意文字的可读性。选择与图像背景有对比度的颜色，以确保文字易于阅读。使用半透明背景也是一种良好的选择，可以增强文字的清晰度。
确保在图像上添加文字时，不违反版权法，使用自己有机制的图像，或确保在使用公共领域或拥有授权的图像。
总体而言，使用HTML和CSS在图片上添加文字是一个比较简单且实用的技巧。只需几个步骤，就能有效提高你的网页设计增强用户体验。实践这些技巧，为你的项目增添更多的视觉冲击与信息表达能力，帮助用户更好地理解和记住你的内容。
