带文本覆盖的图像

简介

在这个实验中，我们将深入探讨 CSS 编程的世界。本实验的目的是帮助你更好地理解 CSS 及其在网页开发中的作用。你将学习如何对 HTML 元素进行样式设置、应用不同类型的 CSS 选择器以及使用 CSS 创建响应式布局。

带文本覆盖的图像

虚拟机中已经提供了 index.html 和 style.css。

要显示带有文本覆盖的图像，请使用 <figure> 和 <figcaption> 元素。在 CSS 中使用 linear-gradient 属性在图像上创建覆盖效果。以下是一个示例代码片段：

<figure class="text-overlay-image">
  <img src="https://picsum.photos/id/971/400/400.jpg" />
  <figcaption>
    <h3>Business <br />Pricing</h3>
  </figcaption>
</figure>

.text-overlay-image {
  box-sizing: border-box;
  position: relative;
  margin: 8px;
  max-width: 400px;
  max-height: 400px;
  width: 100%;
}

.text-overlay-image figcaption {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
  color: #fff;
  padding: 16px;
  font: 700 28px/1.2 sans-serif;
}

.text-overlay-image figcaption h3 {
  margin: 0;
}

请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“带文本覆盖的图像”实验。你可以在 LabEx 中练习更多实验来提升你的技能。