что такое blend mode
Свойство background-blend-mode
Свойство background-blend-mode — режим смешивания фоновых слоёв — алгоритм, определяющий механизм взаимодействия пикселей каждого слоя. Фон одного элемента может иметь несколько слоёв.
Свойство 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 — белому. Все режимы смешивания можно разделить на следующие группы:
Что такое blend mode
The type is a collection of keywords describing blend modes.
A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.
Синтаксис
Возможные значения
The final color is the top color, whatever the bottom color may be.
The effect is similar to two opaque pieces of paper overlapping.
The final color is the result of multiplying the top and bottom colors.
A black layer leads to a black final layer, and a white layer leads to no change.
The effect is similar to two images printed on transparent film overlapping.
The final color is the result of inverting the colors, multiplying them and inverting that color value.
A black layer leads to no change, and a white layer leads to a white final layer.
The effect is similar to two images shone onto a projection screen.
overlay The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
This blend mode is equivalent to hard-light but with the layers swapped.
The final color is a color composed of the darkest values per color channel.
The final color is a color composed of the lightest values per color channel.
The final color is the result of dividing the bottom color by the inverse of the top color.
A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.
This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.
The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
This blend mode is equivalent to overlay but with the layers swapped.
The effect is similar to shining a harsh spotlight on the backdrop.
The final color is the result of subtracting the darker of the two colors from the lighter one.
A black layer has no effect, while a white layer inverts the other layer’s color.
The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
A pure gray backdrop, having no saturation, will have no effect.
The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
The effect preserves gray levels and can be used to colorize the foreground.
The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
This blend mode is equivalent to color, but with the layers swapped.
Интерполяция режимов наложения
Changes between blends mode are not interpolated. Any change occurs abruptly.
Режимы наложения (или режимы смешивания ) при редактировании цифровых изображений и компьютерной графики используются для определения того, как два слоя смешиваются друг с другом. Режим наложения по умолчанию в большинстве приложений заключается в том, чтобы просто скрыть нижний слой, накрыв его тем, что присутствует в верхнем слое (см. Альфа-композитинг ); поскольку каждый пиксель имеет числовые значения, существует множество других способов смешать два слоя.
В формулах, показанных на этой странице, значения меняются от 0,0 (черный) до 1,0 (белый).
СОДЕРЖАНИЕ
Нормальный режим наложения
Это стандартный режим наложения, в котором используется только верхний слой, без смешивания его цветов со слоем под ним:
Раствориться
Adobe Photoshop генерирует псевдослучайный шаблон дизеринга шума при запуске, при этом каждому местоположению пикселя в массиве 2D-растра назначается значение серого (R = G = B) и значение альфа, равное 1 («включено»). По мере уменьшения непрозрачности верхнего слоя значение альфа некоторых серых пикселей переключается с 1 на 0 («выключено»), в результате чего пиксели изображения, соответствующие пикселю с серым значением в растровом массиве, либо включен (видимый, непрозрачный) или выключен (невидимый, прозрачный), без градации непрозрачности.
Умножение и экран
Режимы наложения «Умножение» и «Экран» являются основными режимами наложения для затемнения и осветления изображений соответственно. Существует множество их комбинаций, таких как Overlay, Soft Light ( см. Ниже ), Vivid Light, Linear Light и Pin Light.
Умножить
Режим наложения «Умножение» принимает значения канала RGB от 0 до 1 каждого пикселя в верхнем слое и умножает их на значения для соответствующего пикселя из нижнего слоя. Если какой-либо слой был ярче черного, композит темнее; поскольку каждое значение меньше 1, их произведение будет меньше каждого начального значения, которое было больше нуля.
Этот режим является коммутативным : замена двух слоев не меняет результата. Если два слоя содержат одно и то же изображение, режим многократного наложения эквивалентен квадратичной кривой или гамма-коррекции с γ = 2. Для редактирования изображений иногда удобнее просто перейти в диалоговое окно «Кривые» программного обеспечения, поскольку это дает большую гибкость в выборе формы кривых. Или можно использовать диалог уровней: среднее число обычно 1 / γ, поэтому можно просто ввести 0,5.
Если один слой содержит однородный цвет, например серый цвет (0,8, 0,8, 0,8), режим наложения «умножение» эквивалентен кривой, которая представляет собой просто прямую линию. Это также эквивалентно использованию этого значения серого в качестве непрозрачности при смешивании в «нормальном режиме» с черным нижним слоем.
Экран
В режиме наложения Screen значения пикселей в двух слоях инвертируются, умножаются, а затем снова инвертируются. Результат противоположен умножению: там, где любой слой был темнее белого, композит светлее.
Этот режим является симметричным : замена двух слоев не меняет результата. Если один слой содержит однородный серый цвет, режим наложения экрана эквивалентен использованию этого значения серого в качестве непрозрачности при наложении «нормального режима» с белым верхним слоем.
Пример верхнего слоя
Пример нижнего слоя
Режим наложения Multiply, примененный к двум слоям-примерам
Режим наложения экрана применен к двум примерам слоев
Оверлей
Overlay сочетает в себе режимы наложения Multiply и Screen. Там, где базовый слой светлый, верхний становится светлее; там, где базовый слой темный, верх становится темнее; там, где базовый слой серого цвета, верхний не затрагивается. Наложение такого же изображения выглядит как S-образная кривая.
В зависимости от значения a базового слоя получается линейная интерполяция между черным ( a = 0), верхним слоем ( a = 0,5) и белым ( a = 1).
Жесткий свет
Мягкий свет
Мягкий свет наиболее тесно связан с Overlay и похож на Hard Light только по названию. Применение чистого черного или белого не приводит к получению чистого черного или белого.
Существует множество различных методов нанесения мягкого света. Все ароматы дают одинаковый результат, когда верхний слой чисто черный; То же самое, когда верхний слой имеет чистый нейтральный серый цвет. Ароматы Photoshop и illusions.hu также дают тот же результат, когда верхний слой является чисто белым (разница между этими двумя заключается в том, как один интерполирует эти 3 результата).
Эти три результата совпадают с гамма-коррекцией нижнего слоя с γ = 2 (для верхнего черного), неизменным нижним слоем (или, что то же самое, γ = 1; для верхнего нейтрального серого) и γ = 0,5 (для верхнего белого ).
Формула, используемая Photoshop с 2012 года, имеет разрыв локального контраста, и другие формулы исправляют его. Формула Photoshop:
Формула Пегтопа более гладкая и исправляет разрыв при b = 0,5:
Это линейная интерполяция между режимами наложения Multiply (для a = 0) и Screen (для a = 1). Это также можно рассматривать как линейную интерполяцию между гамма-коррекцией с γ = 2 (для b = 0) и определенной тональной кривой (для b = 1). (Последняя кривая эквивалентна применению γ = 2 к негативу изображения.)
Третья формула, определенная illusions.hu, исправляет неоднородность другим способом, выполняя гамма-коррекцию с γ в зависимости от b :
При b = 0 получается γ = 2, при b = 0,5 получается γ = 1, при b = 1 получается γ = 0,5, но это не линейная интерполяция между этими тремя изображениями.
Это по-прежнему линейная интерполяция между 3 изображениями для b = 0, 0,5, 1. Но теперь изображение для b = 1 не γ = 0,5, а результат тональной кривой, которая отличается от кривой γ = 0,5 для малых значения a : в то время как гамма-коррекция с γ = 0,5 может увеличить значение во много раз, эта новая кривая ограничивает увеличение a коэффициентом 4.
Уклоняйся и сжигай
Режим наложения экрана применен к примерам изображений
Режим наложения Color Dodge применен к примерам изображений
Режим наложения Linear Dodge ( Additive ) применен к примерам изображений
Простые арифметические режимы наложения
Делить
Добавление
Этот режим наложения просто добавляет значения пикселей одного слоя к другому. В случае значений выше 1 (в случае RGB) отображается белый цвет. « Linear Dodge » дает такой же визуальный результат. Поскольку при этом всегда получаются такие же или более светлые цвета, чем на входе, это также известно как «плюс светлее». Вариант вычитает 1 из всех конечных значений, при этом значения ниже 0 становятся черными; этот режим известен как «плюс темнее».
Вычесть
Этот режим наложения просто вычитает значения пикселей одного слоя из другого. В случае отрицательных значений отображается черный цвет.
Разница
Разница вычитает нижний слой из верхнего или наоборот, чтобы всегда получать неотрицательное значение. Смешивание с черным не приводит к изменениям, поскольку значения для всех цветов равны 0. (Значение RGB для черного составляет (0,0,0).) Смешивание с белым инвертирует изображение.
Только затемнение
Только светлее
Булевы арифметические режимы наложения
Оттенок, насыщенность и яркость
Отношение к маскировке
Результат применения нескольких из этих режимов линейно зависит от уровня пикселей верхнего слоя. В таких случаях, когда верхний слой является чисто черным, происходит определенная трансформация нижнего слоя (который может быть просто чисто черным или чисто белым изображением). Когда верхний слой чисто белый, происходит еще одно такое преобразование. Промежуточные значения серого описаны выше с помощью ползунка непрозрачности во втором преобразовании.
В таких случаях применение режима наложения эквивалентно Нормальному смешиванию :
(Это предполагает, что маска может быть цветной, с ее каналами R, G, B, маскирующими каналы изображения независимо. Многие программы обработки изображений не допускают таких масок; для них эта эквивалентность сохраняется только для верхних слоев в градациях серого.)
Различия между наложением слоев и инструментов
Некоторые приложения позволяют пользователю применять режимы наложения к инструментам рисования, таким как инструмент «Кисть» в Photoshop или любые инструменты рисования в GIMP. Когда с этими инструментами используются режимы наложения, результат рассчитывается на основе пикселей, уже существующих на целевом слое. Если в настоящее время пиксели не существуют, то «закрашенные» пиксели создаются, как если бы они находились в нормальном режиме наложения. Последующие перекрывающиеся мазки затем рассчитываются на основе режима наложения инструмента, а результат применяется непосредственно к слою. Ключевое отличие наложения инструментов от наложения слоев состоит в том, что результаты наложения инструментов обычно не могут быть скорректированы после выполнения обводки, за исключением перехода назад с помощью команды «Отменить» приложения; наложения слоев можно регулировать непрозрачностью или даже переключать, поскольку они применяются динамически между слоями. Иными словами, инструменты рисования изменяют пиксели на слое; Режимы наложения, применяемые к двум слоям, не изменяют никакие пиксели, а влияют только на результирующее визуальное изображение.
Это различие полезно для создания различных эффектов на одном слое, например, при применении техник осветления и затемнения, когда рисование с низкой непрозрачностью на экране или в режимах умножения позволяет пользователю создавать или уменьшать результаты более органичным способом на Одиночный слой.
О режимах наложения в CSS без тайн
Веб-графика всё больше уходит от преобразований с потерей качества. Мы не хотим, чтобы изменения в дизайне или графике вредили исходному материалу. Таким образом, если нам понадобится откатить изменения или поменять что-то другое, оригинал сохранится.
Одна из последних возможностей, до которой дорвались дизайнеры — обработка изображения с режимами наложения. С режимами наложения легко добавить цвет, текстуру и иные специальные эффекты без необходимости ковыряться в графическом редакторе. Это экономит время, поскольку больше не приходится заново обрабатывать графику вручную при каждом изменении, и и избавляет от мучительной необходимости вспоминать точные параметры визуального стандарта, который, возможно, создан пару месяцев назад. Вместо этого графику можно аккуратно подключать, поддерживать и обрабатывать всего несколькими объявлениями CSS.
Что такое режимы наложения
С технической точки зрения, наложение цвета применяет математические операции к цветовым компонентам каждого пикселя изображения. Да-да, в основе всего этого добра для творчества лежит математика! Не волнуйтесь, заучивать формулы для использования режимов наложения не придётся, но, тем не менее, базовое понимание механизма работы наложения пригодится.
W3C рекомендует 15 новых режимов наложения. Всевозможной информации о работе различных режимах наложения полно, и единственного правильного варианта использования каждого из них нет. Давайте подробнее рассмотрим только несколько наиболее полезных режимов. Вот для чего чаще всего я использую режимы наложения.
Эффект прозрачности с multiply (Умножение)
Начнём с умножения. Математическую формулу для этого режима можно представить так:
Вот и всё. Она буквально перемножает цвет верхнего слоя (а) с нижнем слоем (b), чтобы получить итоговый цвет (х), отсюда и название «умножение»
При использовании режима наложения multiply (Умножение), компьютер берёт значение яркости красного канала для обоих слоёв, приводит их к масштабу от 0 до 1 и перемножает их. Затем он проделывает тоже самое с зелёным и синим каналами. После получения всех результатов он соединяет эти каналы в итоговый цвет.
Это конечно здорово, но в чём практический эффект?
Два слоя без наложения.
Два слоя с применением режима наложения multiply
После перемножения чёрные пиксели на верхнем слое отображаются во всей красе: чёрными. А белых пикселей вообще не видно. Они полностью прозрачны. Промежуточные оттенки серого по краям букв затемняют слой ниже. И мы получаем приятные ровные границы с минимумом усилий. Это как если бы графика была с прозрачным фоном изначально.
Такой трюк работает только с чёрными фигурами. Если у источника есть цвет, то это в какой-то мере окрасит результат. Однако, если фигуры белые, то можно использовать режим наложения screen (Экран).
Пыль и царапины с режимом screen (Экран)
Функциональная противоположность multiply — «Экран». Минуточку, если это противоположность режима «Умножение», почему она не называется «Деление»? И снова ответ лежит в математике:
В следующем примере я хотел, чтобы фотография выглядела как старая, поэтому взял скан пыли и царапин, и наложил его с помощью «Экрана». Также я решил использовать именно этот режим наложения, чтобы обесцветить фото с помощью бледно-лилового цвета для эффекта.
Наложение со слоем пыли и царапин (можно ознакомиться на «Spoon Graphics») и слоем бледно-лилового цвета.
Изображение с двумя слоями, где к верхнему слою применён режим наложения screen
Кстати, в некоторых приложениях есть режим деления, но его нет в спецификации W3C. (Я не особо огорчён по этому поводу, поскольку мне никогда не требовался этот режим.)
Добавление цвета с помощью hue и color
У всех режимов наложения есть возможность сдвигать цвет графики, но две из них особенно полезны для добавления цвета: hue (Оттенок) и режим с очень подходящим названием color (Цвет).
Этот режим наложения берёт компонент оттенка из перекрывающего слоя и применяет его к цветам ниже, не затрагивая насыщенность и яркость. Я могу накладывать слои с явно различными цветами, получая при этом тот же результат, пока их значения оттенка совпадают. В случае изображения ниже, всем трем оттенкам коричневого задано значение 26 градусов, но фото выглядит одинаково, независимо от того, какой оттенок накладывается.
color
Этот режим наложения влияет и на оттенок, и на насыщенность исходных пикселей, но игнорирует яркость. Наложенный поверх красновато-коричневый слой не только сделает исходные пиксели красновато-коричневыми, как это было в случае с режимом оттенка, но также придаст им такую же насыщенность, что обычно дает больше выразительного эффекта тонирования, чем просто оттенок.
Того же эффекта можно достичь, если изменить порядок слоёв, поместив цвет под фотографию, и наложить фотографию с помощью режима наложения luminosity (Яркость).
Кроссбраузерное наложение
С этими режимами наложения теперь можно на одном CSS делать эффекты наложения не хуже чем в Photoshop. Но даже хотя все браузеры используют одинаковую математику, всё равно результаты иногда заметно отличаются.
Управление цветом — непростая область, и хотя W3C рекомендует по умолчанию цветовой профиль sRGB, поддержка в разных браузерах неоднородна. Каждый браузер отображает цвет по своему капризу. Например, Chrome отображает картинки в своем «необработанном» цветовом пространстве по умолчанию, если в изображении не указан цветовой профиль. Firefox работает так же, но вдобавок у него есть переключатель (скрытый в настройках конфигурации), позволяющий включить sRGB для изображений без профиля. Между тем Safari, скорее всего, будет наиболее соответсвовать Photoshop, поскольку API графики Apple списан с языка PostScript от Adobe. Но даже там есть различия.
Кроме того, дело не только в несовместимых браузерах. Люди несовместимы! Взять, например, миллионы человек с дальтонизмом. Эти люди, вероятно, видят ваши проекты не так, как вы рассчитывали. Как всегда, тестируйте свои творения в соответствующих браузерах, проверяйте доступность и не надейтесь, что ваши проекты выглядят везде одинаково!
И конечно же тестируйте на реальных устройствах, чтобы понимать, как аппаратные ограничения (маленькая оперативная память, к примеру) повлияют на сайт. С некоторыми режимами наложения прокрутка может тормозить. Если вам нужна идеальная плавность с полноценными 60 кадрами в секунду, некоторые варианты могут вам не подойти.
Применение режимов наложения
Наложение фоновых изображений
Попробуем наложить пыль и царапины на наше фото. (Заметьте, что в примерах показан только код, непосредственно относящийся к делу)
Порой вам может понадобиться просто наложить цвет. К сожалению, CSS-свойство background-color ограничивает нас одним цветом, и это всегда нижний слой, независимо от того, объявлено ли background-color в начале или в конце списка. Спецификация W3C предлагает нотацию image(), позволяющую разработчику «использовать сплошной цвет в качестве изображения», но необходимой поддержки браузерами пока нет. К счастью, поскольку градиенты в CSS — это разновидность картинок, можно хитростью заставить браузер сгенерировать сплошной цвет, задав переход из цвета в этот же цвет.
Теперь осветлим изображение, как мы делали ранее, и придадим ему оттенок коричневого цвета (сепия).
Наложение HTML-элементов
Вот новый пример использования mix-blend-mode для смешивания нескольких элементов.
Использование mix-blend-mode для смешивания нескольких элементов.
Использование свойства isolation для предотвращения элемента в нижнем слое от смешивания со слоями выше.
Когда я выстраивал это с помощью HTML и CSS, то ожидал увидеть следующее:
Но в результате наложение применяется к контейнеру вместе со всем его содержимым, как показано ниже.
Поддержка браузерами
Режимы наложения поддерживаются в большинстве современных браузеров, кроме Internet Explorer и Edge. Но не отчаивайтесь, все эти свойства Microsoft внесла в список «на рассмотрение» для Edge, и этот браузер уже поддерживает все эти режимы наложения в SVG, так что есть надежда на скорую реализацию. Также не помешает проголосовать за эти свойства на форуме разработчиков Microsoft Edge «Uservoice».
Помните, что браузеры, не поддерживающие режимы наложения, отобразят ваши проекты не так, как планировалось. Если не уверены, что ваша аудитория работает с передовыми браузерными технологиями, лучше не рискуйте. Спросите себя, допустимы ли запасные варианты для части аудитории. Если нет, то ищите обходной путь.
Несмотря на эти предостережения, режимы наложения прекрасно дополнят арсенал инструментов любого разработчика. Теперь можно добавлять прозрачность, насыщенность и текстуру с помощью CSS, делая это гибко и без ущерба для исходного материала. Это отличное дополнение в браузере и в наших руках.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!