带文本覆盖的图像

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

带文本覆盖的图像

虚拟机中已经提供了 index.htmlstyle.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 中练习更多实验来提升你的技能。