如何创建：图像上的文本块

学习如何在图像上放置文本块。

如何在图像中放置文本块

第一步 - 添加 HTML：

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>What a great city! I love it!</p>
  </div>
</div>

第二步 - 添加 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 定位