如何使用 CSS 将文本放置在图像上
主题:HTML / CSS
答案:使用 CSS position 属性
在创建照片库或类似内容时，您可能需要在图像上放置一些标题文本或描述。 您可以将 CSS 定位方法 与 margin 属性结合使用，将文本定位或放置在 image（即 <img> 元素）上。
让我们看一下以下示例，以了解其基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在 CSS 中将文本放置在图像上</title>
<style>
.box{
position: relative;
display: inline-block; /* 使框的宽度与图像相同 */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
top: 40%; /* 调整此值以上下移动定位的 div */
text-align: center;
width: 60%; /* 设置定位 div 的宽度 */
}
</style>
</head>
<body>
<div class="box">
<img src="images/kites.jpg" alt="Flying Kites">
<div class="text">
<h1>Flying Kites</h1>
</div>
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
