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

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

Duotone — популярная цветовая обработка фотографий, при которой изображение выглядит так, как будто оно состоит только из двух контрастных цветов: один — для бликов, другой — для низких. Однако как это сделать в 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¶

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

1
2
3

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

Screen¶

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

1
2
3

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

Overlay¶

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

1
2
3

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

Darken¶

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

1
2
3

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

Lighten¶

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

1
2
3

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

Color dodge¶

При использовании режима color-dodge цвет фона осветляется, отражая цвет источника. На чисто черные цвета этот режим не влияет.

1
2
3

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

Color burn¶

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

1
2
3

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

Hard light¶

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

1
2
3

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

Soft light¶

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

1
2
3

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

Difference¶

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

1
2
3

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

Exclusion¶

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

1
2
3

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

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

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

Hue¶

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

1
2
3

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

Saturation¶

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

1
2
3

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

Color¶

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

1
2
3

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

Luminosity¶

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

1
2
3

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

Свойство isolation¶

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

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

Источник — Blend Modes

Комментарии