Наложение текста на изображение: Повысьте читаемость с помощью CSS backdrop фильтров

Введение

В этом практическом занятии мы изучим наложение текста на изображение с использованием CSS. Целью этого практического занятия является обучение вам отображать текст поверх изображения с наложением, чтобы он был читаемым независимо от фонового изображения и цвета. Вы научитесь использовать свойство backdrop-filter для применения эффектов blur и brightness к вашему тексту, создавая профессиональный и визуально привлекательный дизайн.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Наложение текста на изображение

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.