简介
在这个实验中，我们将学习如何使用 CSS 实现图像文本叠加效果。本实验的目的是教你如何在图像上叠加显示文本，使其在任何背景图像和颜色下都清晰可读。你将学习如何使用 backdrop-filter 属性为文本应用模糊和亮度效果，从而创建出专业且视觉上吸引人的设计。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
图像文本叠加
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版
图像文本叠加
虚拟机中已经提供了 index.html 和 style.css。
要在带有叠加效果的图像上显示文本，请使用 backdrop-filter 属性来应用 blur(14px) 和 brightness(80%) 效果。这可确保无论背景图像和颜色如何，文本都清晰可读。以下是一个 HTML 代码示例：
<div>
<h3 class="text-overlay">Hello, World</h3>
<img src="https://picsum.photos/id/1050/1200/800" />
</div>以及相应的 CSS 代码：
div {
position: relative;
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
padding: 1rem;
font-size: 2rem;
font-weight: 300;
color: white;
backdrop-filter: blur(14px) brightness(80%);
}请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了图像文本叠加实验。你可以在 LabEx 中练习更多实验来提升你的技能。
