Режимы наложения¶
В этом модуле, посвященном режимам наложения, можно создавать композиционные эффекты путем смешивания двух или более слоев, а также научиться выделять изображение на белом фоне.
CSS подкаст
024: Режимы наложения
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 | |
Screen¶
Использование screen умножает значения света — эффект, обратный эффекту multiply, и чаще всего приводит к более яркому результату.
1 2 3 | |
Overlay¶
Этот режим наложения — overlay — сочетает в себе multiply и screen. Базовые темные цвета становятся темнее, а базовые светлые — светлее. Средние цвета, такие как 50% серый, не затрагиваются.
1 2 3 | |
Darken¶
Режим наложения darken сравнивает светимость темных цветов исходного и фонового изображений и выбирает самый темный из них. При этом для каждого цветового канала сравниваются не яркости, а значения rgb (как это делают multiply и screen). При использовании darken и lighten в результате этого сравнения часто создаются новые цветовые значения.
1 2 3 | |
Lighten¶
Использование lighten делает прямо противоположное darken.
1 2 3 | |
Color dodge¶
При использовании режима color-dodge цвет фона осветляется, отражая цвет источника. На чисто черные цвета этот режим не влияет.
1 2 3 | |
Color burn¶
Режим наложения color-burn очень похож на режим наложения multiply, но увеличивает контрастность, в результате чего средние тона становятся более насыщенными, а блики уменьшаются.
1 2 3 | |
Hard light¶
Использование режима hard-light создает яркий контраст. Этот режим наложения либо экранирует, либо умножает значения яркости. Если значение пиксела светлее 50% серого, то изображение осветляется, как бы экранируется. Если значение темнее, то оно умножается.
1 2 3 | |
Soft light¶
Режим наложения soft-light является менее жесткой версией overlay. Он работает практически так же, но с меньшим контрастом.
1 2 3 | |
Difference¶
Хорошее представление о том, как работает difference, напоминает работу с фотонегативом. Режим наложения difference берет значение разности для каждого пикселя, инвертируя светлые цвета. Если значения цветов одинаковы, они становятся черными. Различия в значениях инвертируются.
1 2 3 | |
Exclusion¶
Использование exclusion очень похоже на difference, но вместо возврата черного цвета для одинаковых пикселей будет возвращаться 50% серого, что приведет к более мягкому результату с меньшим контрастом.
1 2 3 | |
Неразделимые режимы наложения¶
Эти режимы наложения можно представить как компоненты HSL цвета. Каждый из них берет определенное значение компонента из активного слоя и смешивает его с другими значениями компонентов.
Hue¶
Режим наложения hue берет оттенок исходного цвета и применяет его к насыщенности и светлоте цвета фона.
1 2 3 | |
Saturation¶
Это работает так же, как hue, но при использовании Saturation в качестве режима наложения насыщенность исходного цвета применяется к оттенку и светлоте цвета фона.
1 2 3 | |
Color¶
Режим наложения color создаст цвет из оттенка и насыщенности исходного цвета и светлоты цвета фона.
1 2 3 | |
Luminosity¶
Наконец, luminosity является обратной характеристикой color. Он создает цвет с яркостью исходного цвета и оттенком и насыщенностью цвета фона.
1 2 3 | |
Свойство isolation¶
Если свойству isolation присвоить значение isolate, то будет создан новый контекст наложения, который не позволит ему смешиваться с фоновым слоем. Как вы узнали из модуля z-index, при создании нового контекста наложения этот слой становится базовым. Это означает, что режимы наложения на родительском уровне больше не будут применяться, но элементы внутри элемента с установленной опцией isolation: isolate все равно могут смешиваться.
Обратите внимание, что это не работает с режимом наложения background-blend-mode, поскольку свойство фона уже изолировано.
Источник — Blend Modes