如何创建 - 图像上的文本块
了解如何在图像上放置文本块。
图像文本块
如何在图像中放置文本块
步骤 1) 添加 HTML:
实例
<div class="container">
<img src="nature.jpg" alt="Norway"
style="width:100%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
步骤 2) 添加 CSS:
实例
/* 包含图像和文本的容器 */
.container {
position: relative;
}
/* 右下角文字 */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
亲自试一试 »
要详细了解如何设置图片样式，请阅读我们的CSS 图片教程。
要了解有关 CSS 定位的更多信息，请阅读我们的 CSS 定位 教程。
