图像上的文本块

---

了解如何在图像上放置文本块。

---

图像文本块

Nature

What a beautiful sunrise

Nature

What a beautiful sunrise

亲自试一试 »

---

如何在图像中放置文本块

步骤 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 定位 教程。