简介
在这个实验中,我们将深入探讨 CSS 编程的世界。本实验的目的是帮助你更好地理解 CSS 及其在网页开发中的作用。你将学习如何对 HTML 元素进行样式设置、应用不同类型的 CSS 选择器以及使用 CSS 创建响应式布局。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在这个实验中,我们将深入探讨 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 中练习更多实验来提升你的技能。