Режимы наложения

Подкаст CSS – 024: Режимы наложения

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

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

Что такое режим наложения?

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

Вы можете использовать большинство режимов наложения, доступных в инструменте дизайна, с CSS, используя свойства mix-blend-mode или background-blend-mode . mix-blend-mode применяет смешивание ко всему элементу, а background-blend-mode применяет смешивание к фону элемента.

Вы используете background-blend-mode когда у вас есть несколько фонов элемента и вы хотите, чтобы все они сливались друг с другом.

mix-blend-mode влияет на весь элемент, включая его псевдоэлементы. Одним из вариантов использования является первоначальный пример двухцветного изображения, в котором цветные слои применяются к элементу через его псевдоэлементы.

Режимы наложения делятся на две категории: разделимые и неразделимые. Разделяемый режим наложения рассматривает каждый цветовой компонент, например RGB, индивидуально. Неразделимый режим наложения учитывает все цветовые компоненты одинаково.

Совместимость с браузером

mix-blend-mode

background-blend-mode

Разделяемые режимы наложения

Нормальный

Это режим наложения по умолчанию, который ничего не меняет в том, как элемент смешивается с другими.

Умножить

Режим наложения multiply подобен наложению нескольких прозрачных пленок друг на друга. Белые пиксели будут выглядеть прозрачными, а черные — черными. Все, что находится между ними, умножит значения яркости (света). Это означает, что свет становится намного светлее, а темный — темнее, что чаще всего приводит к более темному результату.

.my-element {
  mix-blend-mode: multiply;
}

Экран

Использование screen умножает значения освещенности — эффект, обратный multiply , и чаще всего дает более яркий результат.

.my-element {
  mix-blend-mode: screen;
}

Наложение

Этот режим наложения — overlay — сочетает в себе multiply и screen . Базовые темные цвета становятся темнее, а базовые светлые — светлее. Цвета среднего диапазона, такие как 50%-ный серый, не затрагиваются.

.my-element {
  mix-blend-mode: overlay;
}

Затемнить

Режим наложения darken сравнивает яркость темного цвета исходного изображения и фонового изображения и выбирает самый темный из двух. Он делает это путем сравнения значений RGB вместо яркости (как это было бы multiply и screen ) для каждого цветового канала. При использовании darken и lighten в результате этого процесса сравнения часто создаются новые значения цвета.

.my-element {
  mix-blend-mode: darken;
}

Облегчить

Использование lighten делает полную противоположность darken .

.my-element {
  mix-blend-mode: lighten;
}

Цветовой уклон

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

.my-element {
  mix-blend-mode: color-dodge;
}

Цветной ожог

Режим наложения color-burn очень похож на режим наложения multiply , но увеличивает контраст, что приводит к более насыщенным средним тонам и уменьшению светлых участков.

.my-element {
  mix-blend-mode: color-burn;
}

Жесткий свет

Использование hard-light создает яркий контраст. Этот режим наложения либо экранирует, либо умножает значения яркости. Если значение пикселя светлее 50 % серого, изображение становится светлее, как если бы оно было растрировано. Если он темнее, он умножается.

.my-element {
  mix-blend-mode: hard-light;
}

Мягкий свет

Режим наложения soft-light — это менее резкая версия overlay . Это работает почти так же, но с меньшим контрастом.

.my-element {
  mix-blend-mode: soft-light;
}

Разница

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

.my-element {
  mix-blend-mode: difference;
}

Исключение

Использование exclusion очень похоже на difference , но вместо того, чтобы возвращать черный цвет для одинаковых пикселей, оно возвращает 50% серого, что приводит к более мягкому результату с меньшей контрастностью.

.my-element {
  mix-blend-mode: exclusion;
}

Неразделимые режимы наложения

Вы можете думать об этих режимах наложения как о цветовых компонентах HSL. Каждый из них берет определенное значение компонента из активного слоя и смешивает его со значениями других компонентов.

Хюэ

Режим наложения hue берет оттенок исходного цвета и применяет его к насыщенности и яркости цвета фона.

.my-element {
  mix-blend-mode: hue;
}

Насыщенность

Это работает аналогично hue , но использование saturation в качестве режима наложения применяет насыщенность исходного цвета к оттенку и яркости цвета фона.

.my-element {
  mix-blend-mode: saturation;
}

Цвет

Режим наложения color создаст цвет на основе оттенка и насыщенности исходного цвета и яркости цвета фона.

.my-element {
  mix-blend-mode: color;
}

Яркость

Наконец, luminosity обратна color . Он создает цвет с яркостью исходного цвета, а также оттенком и насыщенностью цвета фона.

.my-element {
  mix-blend-mode: luminosity;
}

Свойство isolation

Если вы установите для свойства isolation значение isolate , это создаст новый контекст наложения, который предотвратит его смешивание с фоновым слоем. Как вы узнали из модуля z-index , когда вы создаете новый контекст стекирования, этот слой становится базовым. Это означает, что режимы наложения родительского уровня больше не будут применяться, но элементы внутри элемента с isolation: isolate по-прежнему могут смешиваться.

Обратите внимание: это не работает в background-blend-mode поскольку свойство фона уже изолировано.

Проверьте свое понимание

Проверьте свои знания о режимах наложения