Свойство background-blend-mode


Свойство background-blend-modeрежим смешивания фоновых слоёв — алгоритм, определяющий механизм взаимодействия пикселей каждого слоя. Фон бокса одного элемента может иметь несколько слоёв. Количество слоёв определяется количеством значений, разделенных запятыми в свойстве background-image. Если для элемента задано несколько фоновых слоёв, первый фон из списка будет применяться к верхнему слою.

Свойство background-blend-mode делает верхний (активный) слой полупрозрачным, что позволяет показывать сквозь него нижележащие слои. Обязательное условие — фоновых слоёв должно быть минимум два:

Рис. 1. Режим смешивания для градиента и картинки

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

Рис. 2. Режим смешивания для картинки и градиента

Если для одного элемента задано больше двух фоновых слоёв, то для него можно задать несколько режимов смешивания, перечислив их через запятую.

Рис. 3. Два режима смешивания для двух градиентов и картинки

Свойство background-blend-mode может применяться к любому html-элементу, не анимируется и не наследуется.

Поддержка браузерами

IE: не поддерживает
Edge: не поддерживает
Firefox: 30.0
Chrome: 35.0
Safari: 7.1 частичная поддержка
Opera: 22.0
iOS Safari: 8.0 частичная поддержка
Opera Mini: не поддерживает
Android Browser: 53.0
Chrome for Android: 54.0

1. Виды режимов смешивания

Для каждого режима используются математические расчёты, которые вычисляются в диапазоне от 0 до 1, где 0 соответствует чёрному цвету, 1 — белому. Все режимы смешивания можно разделить на следующие группы:
1) Нормальный режим — normal;
2) Режим контраста — overlay, soft-light, hard-light;
3) Режим затемнения — darken, multiply, color-burn;
4) Режим осветления — lighten, screen, color-dodge;
5) Режим сравнения — difference, exclusion;
6) Компонентный режим — hue, saturation, color, luminosity.

background-blend-mode
normal Значение по умолчанию, которое указывает на отсутствие смешивания, так как верхний слой остаётся непрозрачным.
overlay Режим перекрытия. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Так как режим работает в среднем диапазоне этих двух режимов, то полутона (50% серого) становятся прозрачными.
soft-light Режим мягкий свет. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Похож на overlay, но придаёт более натуральный мягкий эффект, напоминающий сияние рассеянного светового пятна на фоне. Полутона также становятся прозрачными.
hard-light Режим жёсткий свет. Цвета умножаются или осветляются, в зависимости от источника цвета. Эффект похож на сияние резкого светового пятна на фоне. Полутона также становятся прозрачными.
darken Режим затемнения. Если пиксели верхнего слоя темнее, чем на нижележащих слоях, они сохраняются в изображении. Если пиксели в верхнем слое светлее, они заменяются на более тёмные пиксели нижнего слоя, поэтому в основном сохраняются темные тона всех слоёв.
multiply Режим умножения. Работает путём умножения уровней яркости пикселов верхнего слоя с пикселами нижележащих слоёв. Отлично подходит для создания теней и удаления белых и других светлых тонов (сохраняя при этом более тёмные цвета). Умножение любого цвета на черный даёт черный. Умножение любого цвета на белый сохраняет оригинальный цвет.
color-burn Режим «выжигания» основы. Заменяет цвета на противоположные, затемняя верхний слой, не меняя светлые (белые) оттенки.
lighten Режим замены светлым. Тёмные пиксели верхнего слоя заменяются на светлые пиксели нижележащих слоёв. Светлые пиксели не заменяются.
screen Режим экрана. Эффект аналогичен режиму lighten с отличием в том, что удаляет больше тёмных пикселей, создавая плавный переход. Работает как режим multiply, но удаляет тёмные тона.
color-dodge Режим осветления основы. Насыщает светлые тона и блики. Темные области изображения остаются без изменений.
difference Режим вычитания. Отображает тональную разницу между двумя слоями, удаляя белые пиксели из слоя. Результирующее изображение получается тёмным и противоположным по тону. Делает избирательную инверсию, при которой светлые цвета инвертируются в более тёмные и насыщенные, а тёмные остаются без изменения.
exclusion Режим исключения. Сравнивает пиксел активного слоя и эквивалентный пиксел нижележащего слоя с учётом их яркости, делая избирательную инверсию. Черный никогда не инвертируется, белый — всегда. Одинаковые цвета компенсируют друг друга, давая серый цвет. Производит эффект, похожий на режим difference, но более мягкий.
hue Режим цветового тона. Сохраняет оттенок активного слоя и добавляет ему яркость и насыщенность нижележащих слоев (получается изображение из нижнего слоя с цветами верхнего слоя).
saturation Режим насыщенности. Создаёт цвет с насыщенностью исходного цвета и оттенком и яркостью нижележащего цветового фона. Серые оттенки остаются без изменений.
color Режим цветности. Создаёт цвет с оттенком и насыщенностью исходного цвета и яркость нижележащего цветового фона. Сохраняет серые тона нижележащих слоёв.
luminosity Режим яркости. Создаёт цвет с яркостью исходного цвета и оттенком и насыщенностью нижележащего цветового фона. Эффект противоположен режиму color.

Рис. 4. Виды режимов смешивания

Примеры использования режимов смешивания

1. Эффект холста

2. Ретро-эффект

3. Сетчатый эффект

4. Градиентный узор

  • Создание Сайтов

    А я голову ломал, как это делается. Спасибо Елена за просвещение.