Как в CSS сделать слой полупрозрачного фона, не затрагивая текст

Как в CSS сделать слой полупрозрачного фона, не затрагивая текст

От автора: давайте посмотрим, как с помощью CSS сделать слой полупрозрачного фона, не затрагивая текст.

Допустим, у вас есть изображение, подобное этому крабу, и вы хотите разместить его в пользовательском интерфейсе под текстом.

Но если вы просто поместите изображение позади текста, текст может быть трудночитаемым, поэтому вам также нужно добавить более темное полупрозрачное наложение поверх изображения, но за текстом. Давайте рассмотрим, как это сделать с помощью только CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Базовые стили

Вот базовые стили нашего элемента. Они добавляют немного места сверху, снизу и по бокам. Они также выравнивают текст по центру элемента. Также добавим черный фон с белым текстом.

Вот демо.

Теперь давайте продолжим и добавим фоновое изображение.

Добавление фонового изображения

В CSS мы укажем свойство background-image для добавления изображения. Мы также добавим background-position и background-size, чтобы центрировать изображение и растянуть его заполнить на весь контейнер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот обновленная демонстрация.

Вы могли заметить, что часть текста трудно читается из-за того, что он расположен на вершине краба. Это проблема доступности и удобства использования. Давайте посмотрим, как это исправить.

Добавление наложения

Чтобы исправить это, мы добавим полупрозрачное черное наложение поверх изображения, но под текстом. Если вы включите в свойство background-image несколько элементов, они будут складываться в стек, причем первый элемент в списке будет наверху.

Мы собираемся добавить linear-gradient в background-image. Мы будем использовать объявление цвета rgba() с 0, 0, 0 для черного цвета. Затем мы будем используем 0.7 для альфа-канала (чтобы сделать наложение полупрозрачным).

Вот демонстрация с наложением.

Теперь у нас есть полупрозрачное наложение поверх изображения, но под текстом. Слова легче видеть зрячим пользователям, но вы все равно можете разглядеть фоновое изображение под ними.

Если вы хотите посмотреть видео, демонстрирующее, как это работает, мой приятель Стив Гриффит сделал руководство пару недель назад.

Автор: Chris Ferdinandi

Источник: gomakethings.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.