如何 - 图片上的文本块
学习如何在图片上放置文本块。
图片文本块
如何在图片中放置文本块
步骤 1) 添加 HTML
示例
<div class="container">
<img src="nature.jpg" alt="挪威" style="width:100%;">
<div class="text-block">
<h4>自然</h4>
<p>多么美丽的日出</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 定位 教程。
