2.32. Объединение и смешивание слоев

Модуль Compositing and Blending определяет набор CSS-свойств, влияющих на визуальное отображение элементов. Эффекты, создаваемые этими свойствами, применяются после того, как элементы измерены и расположены в соответствии с моделью визуального форматирования. Некоторые значения свойств приводят к созданию содержащего блока и/или созданию контекста наложения (нового порядка отрисовки).

Композитинг описывает, как формы различных элементов объединяются в одно изображение. В модели Simple Alpha Compositing, описанной в текущей спецификации, выделяется два шага к общей операции композитинга — сначала выполняется этап смешивания, затем этап композитинга Портера-Даффа.

На этапе смешивания вычисляется результирующий цвет там, где исходный элемент и фон перекрываются. Цвет графического элемента заменяется результирующим цветом. Затем графический элемент компонуется с фоном, используя оператор композитинга Портера-Даффа source-over, согласно которому исходное изображение находится над фоном.

• Содержание:
• 1. Введение в объединение слоев
• 2. CSS-свойства
• 2.1. Режим смешивания цветов: свойство mix-blend-mode
• 2.2. Контекст наложения: свойство isolation
• 2.3. Режим смешивания фоновых слоев: свойство background-blend-mode
• 3. Режимы смешивания
• 3.1. Разделимые режимы смешивания
• 3.2. Неразделимые режимы смешивания

1. Введение в объединение слоев

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

Пиксель является наименьшей точкой в изображении, он хранит информацию о цветовых каналах RGB, Red (красный), Green (зеленый) и Blue (голубой) и возможно, информацию о прозрачности. Альфа-канал является цветовой составляющей, которая представляет степень прозрачности или непрозрачности цвета, то есть красного, зеленого и синего каналов.

Непрозрачность описывается с использованием альфа-значения, которое хранится вместе со значением цвета для каждой конкретной точки. Значение альфа составляет от 0 до 1 включительно. Значение 0 означает, что пиксель не имеет покрытия в этой точке и поэтому является прозрачным; то есть нет цветового вклада от любой геометрии, потому что геометрия не перекрывает этот пиксель. Значение 1 означает, что пиксель полностью непрозрачен; геометрия полностью перекрывает пиксель.

2. CSS-свойства

2.1. Режим смешивания цветов: свойство mix-blend-mode

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

IE: —
Edge: 79
Firefox: 32
Chrome: 41
Safari: 8
Opera: 28
iOS Safari: 8
UC Browser for Android: ?
Chrome for Android: 97
Samsung Internet: 4

Свойство mix-blend-mode определяет формулу смешивания цветов исходного элемента с фоновым слоем. Принимает значения, описанные в разделе Режимы смешивания.

Свойство применяется ко всем элементам, в SVG — к элементам-контейнерам, графическим элементам и графическим ссылочным элементам.

Свойство не наследуется.

Синтаксис

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: initial;
mix-blend-mode: inherit;

See the Pen Untitled by Elena (@html5book) on CodePen.

2.2. Контекст наложения: свойство isolation

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

IE: —
Edge: 79
Firefox: 36
Chrome: 41
Safari: 8
Opera: 30
iOS Safari: 8
UC Browser for Android: ?
Chrome for Android: 97
Samsung Internet: 4

Свойство isolation используется для предотвращения смешивания элемента с его фоном. Обычно используется вместе с mix-blend-mode.

В SVG свойство определяет, является элемент изолированным или нет.

В CSS isolation: isolate; позволяет элементу создавать новый контекст наложения. Контекст наложения формируется у элементов, имеющих общий родительский элемент.

Свойство применяется ко всем элементам, в SVG — к элементам-контейнерам, графическим элементам и графическим ссылочным элементам.

Свойство не наследуется.

isolation
Значения:
auto	Значение по умолчанию, означает, что элемент не изолирован. Тем не менее, задание для элемента свойств, создающих новый контекст наложения (например, transform: translate();), приводит к его изоляции.
isolate	Создает новый контекст наложения.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

isolation: auto;
isolation: isolate;
isolation: inherit;
isolation: initial;

See the Pen Untitled by Elena (@html5book) on CodePen.

2.3. Режим смешивания фоновых слоев: свойство background-blend-mode

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

IE: —
Edge: 79
Firefox: 30
Chrome: 35
Safari: 10.1
Opera: 22
iOS Safari: 10.3
UC Browser for Android: 12.12
Chrome for Android: 97
Samsung Internet: 4

Свойство background-blend-mode определяет режим смешивания каждого фонового слоя.

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

Свойство принимает значения, описанные в разделе Режимы смешивания. Применяется ко всем html-элементам.

Свойство не наследуется.

Синтаксис

background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;
background-blend-mode: initial;
background-blend-mode: inherit;

See the Pen
Untitled by Elena (@html5book) on CodePen.

Список значений background-blend-mode должен применяться в том же порядке, что и список значений background-image. Это означает, что первое значение в списке будет применено к слою, который находится сверху. Если у свойства недостаточно разделенных запятыми значений, чтобы соответствовать количеству слоев, браузер должен рассчитать свое используемое значение, повторяя список значений, пока их не станет достаточно.

Если вместо background-image используется background, то свойство background-blend-mode для этого элемента сбрасывается в значение по умолчанию.

3. Режимы смешивания

Смешивание — это аспект композитинга, который вычисляет смешение цветов там, где исходный элемент и фон перекрываются.

Для каждого режима используются математические расчёты, которые вычисляются в диапазоне от 0 до 1, где 0 соответствует чёрному цвету, 1 — белому. Все режимы смешивания можно разделить на следующие группы:

• Нормальный режим — normal;
• Режим контраста — overlay, soft-light, hard-light;
• Режим затемнения — darken, multiply, color-burn;
• Режим осветления — lighten, screen, color-dodge;
• Режим сравнения — difference, exclusion;
• Компонентный режим — hue, saturation, color, luminosity

3.1. Разделимые режимы смешивания

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

Каждый из следующих режимов смешивания будет применять функцию смешивания B(Cb, Cs) для каждого цветового компонента.

normal — значение по умолчанию, которое указывает на отсутствие смешивания, так как верхний слой остаётся непрозрачным.

multiply — режим умножения. Работает путём умножения уровней яркости пикселей верхнего слоя с пикселями нижележащих слоёв. Отлично подходит для создания теней и удаления белых и других светлых тонов (сохраняя при этом более тёмные цвета). Умножение любого цвета на черный даёт черный. Умножение любого цвета на белый сохраняет оригинальный цвет.

screen — режим экрана. Эффект аналогичен режиму lighten с отличием в том, что удаляет больше тёмных пикселей, создавая плавный переход. Работает как режим multiply, но удаляет тёмные тона.

overlay — режим перекрытия. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Так как режим работает в среднем диапазоне этих двух режимов, то полутона (50% серого) становятся прозрачными.

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

lighten — режим замены светлым. Тёмные пиксели верхнего слоя заменяются на светлые пиксели нижележащих слоёв. Светлые пиксели не заменяются.

color-dodge — режим осветления основы. Насыщает светлые тона и блики. Темные области изображения остаются без изменений.

hard-light — режим «жёсткий свет». Цвета умножаются или осветляются, в зависимости от источника цвета. Эффект похож на сияние резкого светового пятна на фоне. Полутона также становятся прозрачными.

soft-light — режим «мягкий свет». Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Похож на overlay, но придаёт более натуральный мягкий эффект, напоминающий сияние рассеянного светового пятна на фоне. Полутона также становятся прозрачными.

difference — режим вычитания. Отображает тональную разницу между двумя слоями, удаляя белые пиксели из слоя. Результирующее изображение получается тёмным и противоположным по тону. Делает избирательную инверсию, при которой светлые цвета инвертируются в более тёмные и насыщенные, а тёмные остаются без изменения.

exclusion — режим исключения. Сравнивает пиксель активного слоя и эквивалентный пиксель нижележащего слоя с учётом их яркости, делая избирательную инверсию. Черный никогда не инвертируется, белый — всегда. Одинаковые цвета компенсируют друг друга, давая серый цвет. Производит эффект, похожий на режим difference, но более мягкий.

3.2. Неразделимые режимы смешивания

Неразделимые режимы смешивания рассматривают все цветовые компоненты в сочетании, в отличие от разделимых режимов, которые рассматривают каждый компонент в отдельности.

hue — режим цветового тона. Сохраняет оттенок активного слоя и добавляет ему яркость и насыщенность нижележащих слоев (получается изображение из нижнего слоя с цветами верхнего слоя).

saturation — режим насыщенности. Создаёт цвет с насыщенностью исходного цвета и оттенком и яркостью нижележащего цветового фона. Серые оттенки остаются без изменений.

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

luminosity — режим яркости. Создаёт цвет с яркостью исходного цвета и оттенком и насыщенностью нижележащего цветового фона. Эффект противоположен режиму color.

По материалам Compositing and Blending Level 1