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

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

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

<div class="hero"> <h1>This is a crab</h1> <p>I want an image of a crab behind this text.</p>
</div>

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

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

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

.hero { background-color: #000000; color: #ffffff; padding: 1em; text-align: center;
}

Вот демо.

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

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

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

.hero { background-color: #000000; background-image: url(https://images.unsplash.com/photo-1580841129862-bc2a2d113c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80); background-position: center; background-size: cover; color: #ffffff; padding: 1em; text-align: center;
}

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

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

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

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

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

.hero { background-color: #000000; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://images.unsplash.com/photo-1580841129862-bc2a2d113c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80); background-position: center; background-size: cover; color: #ffffff; padding: 1em; text-align: center;
}

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

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

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

Автор: Chris Ferdinandi

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

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