Темнение фонового изображения в CSS без изменения прозрачности

Быстрый ответ

Если вам необходим эффект затемнённого фона, примените чёрный цвет с прозрачностью, который задаётся с использованием rgba(0, 0, 0, 0.5). CSS код для этого выглядит следующим образом:

/* .darken – это класс, который придаёт эффект очков с тёмными стёклами 😎 */
.darken::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Для регулирования степени затемнения изменяйте значение альфа-канала (0-1) */
}
/* Не забывайте установить для элемента с классом .darken относительное позиционирование */
.darken {
  position: relative;
}

Необходимо, чтобы класс .darken имел position: relative;. Степень прозрачности задаётся с помощью альфа-канала в rgba.

Технические способы создания затемнённого фона

Если вы хотите создать что-то более сложное, чем просто использование rgba, попробуйте также linear-gradient, background-blend-mode, filter или псевдоэлементы.

Затемнение с помощью linear-gradient

При помощи многослойного фона и функции linear-gradient можно добиться эффекта затемнения фона.

/* CSI: CSS Investigation – первый слой создаёт эффект фильтра, второй отображает изображение */
.dark-image {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('your-image.jpg');
}
/* Изменяя значения rgba, вы можете получить разные оттенки серого, либо любую другую палитру цветов */

Подробнее об этом расскажет наш спикер на видео

Использование смешения и фильтрации фона

Свойство background-blend-mode позволяет создать неожиданный эффект смешения цвета фона и изображения. Свойство filter: brightness(50%) поможет корректировать яркость изображения, делая его похожим на результат работы в редакторе компьютерной графики.

/* Возможно, вам понадобятся очки для защиты от солнца, когда вы увидите результат */
.blend-darken {
  background-color: black;
  background-blend-mode: darken; /* Не путать со свойствами кофейного напитка ☕️ */
}

.filter-darken {
  filter: brightness(50%); /* Включается режим "невидимого усиления" */
}

Не забудьте проверить совместимость с браузерами для данных эффектов на сайте caniuse.com.

Псевдоэлементы в качестве инструментов затемнения

Псевдоэлемент ::after может добавить при помощи наложения тёмный фон на элемент. Благодаря абсолютному позиционированию он будет полностью перекрывать изображение, словно окутывая его тенью. Плавные переходы делают эффект более естественным.

/* Словно секретные агенты в "Матрице", ::after требуется абсолютное расположение */
.overlay::after {
  content: '';
  background: rgba(0, 0, 0, 0.5); /* И здесь вы, словно Чёрное торнадо */
  ... /* остальные настройки позиционирования и стиля */
}

Также можно использовать box-shadow с inset и RGBA, чтобы создать внутреннюю тень, затемняющую элемент по краям.

Визуализация

Представим, что вы работаете с прозрачным эффектом фона, словно с нетронутым стеклом:

🔲: [Ваш контент]

Нам необходимо затемнить это стекло, чтобы акцентировать внимание на контенте, аналогично тому, как мы надеваем солнцезащитные очки, чтобы на солнце лучше различать детали:

/* Секретные техники тонирования стекла 🕶️ */
.glass {
   background-color: rgba(0, 0, 0, 0.5); 
}

Итак, у вас появился результат – благодаря эффекту "солнцезащитных очков" в CSS, внимание теперь акцентировано на вашем контенте:

🔳: [Теперь восприятие вашего контента гораздо легче для глаз!]

Как исследовать тени неизведанной глубины

Если вы хотите дополнить свой CSS-арсенал числом техник затемнения, рассмотрите использование прозрачных градиентов, внутренних теней и наведения мышью.

Затемнение с прозрачным градиентом

Применив linear-gradient, вы сможете создать эффект увеличенной визуальной глубины тени.

/* Словно градиентный коктейль текила-санрайз */
.gradient-darken {
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%),
    url('your-image.jpg');
}

Затемнение по краям

Создавая box-shadow со значением inset, вы получите эффект виньетирования: края изображения становятся затемнёнными, а центр остаётся светлым.

/* Небольшая порция готической эстетики */
.inset-shadow {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

Затемнение при наведении

Создайте драматичный эффект затемнения при наведении курсора, используя свойства transition.

/* Подчеркните себя при помощи визуальных эффектов */
.hover-darken:hover::after {
  background: rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s ease; /* Плавное появление, словно движение по шёлку */
}

Интерактивное затемнение фона создаёт особую взаимосвязь между пользователем и интерфейсом.

Полезные материалы

1. Создание текста с эффектом вырубки | CSS-Tricks — для создания текстовых эффектов, которые действительно привлекают внимание.
2. Использование многослойных фонов – CSS | MDN — руководство по применению многослойных фонов для создания великолепных визуальных эффектов.
3. Свойство 'opacity' в CSS – CSS Portal — подробный урок по работе с прозрачностью для точного контроля над затемнением.
4. Создание эффекта наложения | w3schools — изучите еффект наложения подробно.
5. Захватывающие эффекты для модальных окон | Codrops — детальное рассмотрение различных эффектов для модальных окон, включая затемнённые варианты.
6. Веб-дизайнерский блог | WDD — обзор мира псевдоэлементов CSS.
7. Вникнуть в свойство 'position' в CSS — эффективное изучение позиционирования в CSS.