如何 - 将文本块放在图像上
了解如何在图像上放置文本块。
图像文本块
如何在图片中放置文本块
步骤 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 定位 教程。
