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

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/positioning("Positioning") subgraph Lab Skills css/selectors -.-> lab-35247{{"Наложение текста на изображение"}} css/fonts -.-> lab-35247{{"Наложение текста на изображение"}} css/text_styling -.-> lab-35247{{"Наложение текста на изображение"}} css/margin_and_padding -.-> lab-35247{{"Наложение текста на изображение"}} css/positioning -.-> lab-35247{{"Наложение текста на изображение"}} end

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

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