Blending mode: mix-blend-mode — CSS | MDN — Primelens.ru-Зеркальные Фотоаппараты,Компактные Фотоаппараты,Видеокамеры,Объективы,Фотовспышки, и Аксессуары в Москве.

Blending mode: mix-blend-mode — CSS | MDN

Содержание

mix-blend-mode | WebReference

Определяет режим наложения исходного цвета на фоновый цвет или фоновое изображение.

Краткая информация

Значение по умолчанию	normal
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

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

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.

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

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

normal: Обычный. Не используется смешивание цветов. Режим по умолчанию.
multiply: Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным.
screen: Осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением чёрного цвета, цвет остаётся неизменным. При перекрытии с применением белого цвета, цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора.
overlay: Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета.
darken: Замена тёмным. В качестве результирующего выбирается основной или совмещённый цвет, в зависимости от того, какой из них темнее. Пиксели с цветом, более светлым по сравнению с совмещённым, заменяются, а пиксели с цветом, более тёмным по сравнению с совмещённым, остаются неизменными.
lighten: Замена светлым. В качестве результирующего цвета выбирается основной или совмещённый цвет, в зависимости от того, какой из них светлее. Пиксели с более тёмным цветом по сравнению с совмещённым цветом заменяются, а пиксели с более светлым цветом по сравнению с совмещённым цветом остаются неизменными.
color-dodge: Осветление основы. Основной цвет заменяется более ярким для отражения совмещённого цвета в результате уменьшения контраста между двумя цветами. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
color-burn: Затемнение основы. Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений.
hard-light: Направленный свет. В этом режиме цвета умножаются или осветляются в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещённый цвет (источник света) является более тёмным, чем 50% серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления тёмных участков к изображению. Наложение чисто-чёрного или чисто-белого цвета приводит к получению чисто-чёрного или чисто-белого цвета.
soft-light: Рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения. Наложение чисто-чёрного или чисто-белого цвета создаёт отчётливые, более тёмные или более светлые зоны, но чистого чёрного или белого цвета не получится.
difference: Разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений.
exclusion: Исключение. В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
hue: Тон. В этом режиме создаётся результирующий цвет с яркостью и насыщенностью основного цвета и цветовым тоном совмещённого цвета.
saturation: Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета.
color: Цвет. Создаётся результирующий цвет с яркостью основного цвета и с цветовым тоном и насыщенностью совмещённого цвета. Этот режим сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям.
luminosity: Яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета.

Песочница

normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

div {
  background: #C8EAF5;
}
img {  
  mix-blend-mode: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>mix-blend-mode</title> <style> div { background: url(/example/image/aquaria.

jpg) center no-repeat; /* Параметры фона */ text-align: center; /* Выравнивание по центру */ } div h2 { font: bold 4em Verdana, Helvetica, sans-serif; /* Параметры шрифта */ padding: 0.5em; /* Поля вокруг текста */ margin: 0; /* Обнуляем */ background: #fff; /* Белый цвет фона */ mix-blend-mode: lighten; /* Режим наложения */ } </style> </head> <body> <div><h2>Аквариум</h2></div> </body> </html>

В данном примере на фоновое изображение накладывается текст с белым фоном, который закрывает собой изображение. Режим наложения lighten оставляет лишь светлые цвета и поскольку цвет текста по умолчанию чёрный, то получаются цветные буквы на белом фоне (рис. 1).

Рис. 1. Текст после наложения на фон

Объектная модель

Объект.style.mixBlendMode

Примечание

Safari и iOS Safari не поддерживают значения hue, saturation, color и luminosity.

Спецификация

Спецификация	Статус
Compositing and Blending Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.

Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


		41	29	7. 1	32

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Цвет и фон

См. также

background-blend-mode

darktable 3.8 user manual — blend modes

Blend modes define how the input and output of a module are combined (blended) together before the module’s final output is passed to the next module in the pixelpipe.

Classic blending modes, designed for display-referred RGB (constrained to 0-100%), implicitly define a fulcrum at 50% (gray) or 100% (white) in their algorithms, depending on the blend mode. Because scene-referred is not subject to these restrictions, this fulcrum needs to be explicitly defined by the user when performing blending operations in the “RGB (scene)” color space. The additional blend fulcrum parameter will be presented to the user when using one of these blend modes in this color space. The effect depends on the operator used. For example, values above the fulcrum might be brightened and values below darkened, or vice versa.

The final output of a module is computed ‘per-pixel’ as follows:

final_output = (1.0 - opacity) * module_input + opacity * blended_output

where the blended_output is a combination of the input and output images, depending on the blend mode (below), and the opacity is defined ‘per-pixel’ by a combination of the mask and global opacity parameter. An opacity of 0% outputs an image that is identical to the input image of the module.

The “reverse” button effectively reverses the roles of the input and output images in the ‘per-pixel’ computation:

final_output = (1.0 - opacity) * module_output + opacity * blended_input

where the blended_input is a combination of the output and input images, depending on the blend mode below where output and input image references are reversed. In “reversed” blend modes, an opacity of 0% outputs an image that is identical to the output image of the module.

normal: The most commonly used blend mode, “normal” simply mixes input and output to an extent determined by the opacity parameter. This mode is commonly used to reduce the strength of a module’s effect by reducing the opacity. This is also usually the blend mode of choice when applying a module’s effect selectively with masks. This mode is also known as the “over” Porter-Duff alpha blending operator (see alpha compositing for more details).
normal bounded: not available in the “RGB (scene)” color space; This blend mode is the same as “normal”, except that the input and output data are clamped to a particular min/max value range. Out-of-range values are effectively blocked and are not passed to subsequent modules. Sometimes this helps to prevent artifacts. However, in most cases (e.g. highly color-saturated extreme highlights) it is better to let unbound values travel through the pixelpipe to be properly handled later. The “normal” blend mode is therefore usually preferred.

addition: Add together the pixel values of the input and output images, lightening the output. When blending in the “RGB (scene)” color space, the pixel values of the output image are multiplied by a value proportional to the “blend fulcrum”.
subtract: Subtract the pixel value of the output from the input. When blending in the “RGB (scene)” color space, the pixel values of the output image are multiplied by a value proportional to the “blend fulcrum”. Pixel values less than 0 are set to 0.
multiply: Multiply the pixel values of the input and output together. When blending in display-referred color spaces, pixel values are between 0 and 1.0, the final output will be clamped and will always be darker. When blending in the “RGB (scene)” color space, this value is further multiplied by a value proportional to the “blend fulcrum”. In this case, values may be greater than 1. 0 and therefore brighten the base image. This may have other side-effects, such as updating the white point in the filmic module.; Multiply blending simulates an optical variable density filter, where the density is defined by the output of the module. It has many applications, from blooming and local contrast enhancements (when used with a blur or low-pass filter) to dodging/burning and global contrast enhancements (when used with exposure). The fulcrum sets the output intensity threshold between darkening and brightening (any RGB value below fulcrum will darken).
divide: Divide the pixel values of the input by the output. When blending in the “RGB (scene)” color space, the pixel values of the output image are multiplied by a value proportional to the “blend fulcrum”.; Since this is the inverse of the multiply mode, it will darken where multiply brightens and vice versa. Everything else works in essentially the same way.
screen: not available in the “RGB (scene)” color space; Invert the input and output pixel values, multiply those values together and invert the result. This yields approximately the opposite effect to “multiply” mode – the resulting image is usually brighter, and sometimes “washed out” in appearance.
average: Return the arithmetic mean of the input and output pixel values.
difference: Return the absolute difference between the input and output pixel values.
geometric mean: Return the square root of the product of the input and output pixel values.
harmonic mean: Return the product of the input and output pixel values, multiplied by 2 and divided by their sum.

The following modes are not available in the “RGB (scene)” blending color space as they rely on an assumption of “50% mid gray” which only applies to display-referred and non-linear color spaces.

overlay: This mode combines the “multiply” and “screen” blend modes: The parts of the input where the output is brighter, become brighter; The parts of the image where the output is darker, become darker; Mid-gray is unaffected. This mode is often combined with the lowpass and highpass modules.
softlight: This mode is similar to “overlay”, except the results are softer and less bright. As with overlay, it is often combined with the lowpass and highpass modules.
hardlight: This mode is not related to “softlight” in anything but name. Like overlay mode it is a combination of “multiply” and “screen” modes and has a different effect above and below mid-gray. The results with hardlight blend mode tend to be quite intense and usually need to be combined with a reduced opacity.
vividlight: This mode is an extreme version of overlay/softlight. Values darker than mid-gray are darkened; Values brighter than mid-gray are brightened. You will probably need to tone down its effect by reducing the opacity
linearlight: This mode is similar to the effect of “vividlight”.
pinlight: This mode performs a darken and lighten blending simultaneously, removing mid-tones. It can result in artifacts such as patches and blotches.

🔗Lab channels

The following are available for blending in the Lab color space only

Lab lightness: Mix the lightness from the input and output images, while taking the color channels (a and b) unaltered from the input image. In contrast to “lightness” this blend mode does not involve any color space conversion and does not clamp any data. In some cases this blend mode is less prone to artifacts than “lightness”.
Lab a-channel: Mix the Lab “a” color channel from the input and output images, while taking the other channels unaltered from the input image.
Lab b-channel: Mix the Lab “b” color channel from the input and output images, while taking the other channels unaltered from the input image.
Lab color: Mix the Lab color channels (a and b) from the input and output images, while taking the lightness unaltered from the input image. In contrast to “color” this blend mode does not involve any color space conversion and does not clamp any data. In some cases this blend mode is less prone to artifacts than “color”.

🔗RGB channels

The following are available when blending in RGB color spaces only.

RGB red channel: Mix the “red” channel from the input and output images, while taking the other channels unaltered from the input image. When blending in the “RGB (scene)” color space, the “red” channel from the output image is multiplied by a value proportional to the “blend fulcrum”.
RGB green channel: Mix the “green” channel from the input and output images, while taking the other channels unaltered from the input image. When blending in the “RGB (scene)” color space, the “green” channel from the output image is multiplied by a value proportional to the “blend fulcrum”.
RGB blue channel: Mix the “blue” channel from the input and output images, while taking the other channels unaltered from the input image. When blending in the “RGB (scene)” color space, the “blue” channel from the output image is multiplied by a value proportional to the “blend fulcrum”.

The following are available when blending in the “RGB (display)” color space only.

HSV lightness: Mix the lightness from the input and output images, while taking color unaltered from the input image. In contrast to “lightness” this blend mode does not involve clamping.
HSV color: Mix the color from the input and output images, while taking lightness unaltered from the input image. In contrast to “color” this blend mode does not involve clamping.

lightness: Mix lightness from the input and output images, while taking color (chroma and hue) unaltered from the input image.
chrominance: Mix chrominance from the input and output images, while taking lightness and hue unaltered from the input image. This blend mode uses RGB ratios, divided by a Euclidean norm.
lighten: not available in the “RGB (scene)” color space; Compare the pixel values of the input and output images, and output the lighter value.
darken: not available in the “RGB (scene)” color space; Compare the pixel values of the input and output images, and output the darker value.
hue: not available in the “RGB (scene)” color space; Mix hue (color tint) from the input and output images, while taking lightness and chroma unaltered from the input image.
color: not available in the “RGB (scene)” color space; Mix color (chroma and hue) from the input and output images while taking lightness unaltered from the input image.; Caution: When modules drastically modify hue (e.g. when generating complementary colors) this blend mode can result in strong color noise.
coloradjustment: not available in the “RGB (scene)” color space; Some modules act predominantly on the tonal values of an image but also perform some color saturation adjustments (e.g. the levels and tone curve modules). This blend mode takes the lightness from the module’s output and mixes colors from input and output, enabling control over the module’s color adjustments.

translations

Français: modes de fusion
German: Überblendmodi
Espanol: modos de fusión
Polish: tryby mieszania
Português: modos de mesclagem
Ukrainian: режими змішування
Dutch: overvloeimethodes

CSS режим наложения фона | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

CSS фоновый режим наложения

— CR

global»>
Глобальное использование
96,4% + 0,17% «=» 96,57%

Позволяет смешивать фоновые изображения CSS, градиенты и цвета.

Chrome

4 — 34: Not supported
35 — 45: Supported
46: Partial support
47 — 110: Supported
111: Supported
112 — 114: Supported

Edge

12 — 18: не поддерживается
79 — 110: Поддерживается
111: Поддерживается

SAFARI

3,1 — 7: Не поддерживается
07% — Partial support»> 7.1 — 10: частичная поддержка
10.1 — 16.1: 16.1: 16,2:0054 16.3: Supported
16.4 — TP: Supported

Firefox

2 — 29: Not supported
30 — 110: Supported
111: Supported
112 — 113: Supported

Opera

9 — 21: не поддерживается
22 — 32: Поддерживается
33: Частичная поддержка
34 — 94: Поддерживается
95: Поддержано

IE

14% — Not supported»> 5.5 — 10: Не поддерживает
5.5 — 10: Не поддерживает
9014
Chrome для Android
1. 111: Поддерживается
Safari на iOS
1. 3,2 — 7,1: не поддерживается
2. 8 — 10,2: частичная поддержка
3. 10,3 — 16,2: Подпочт : Поддерживается
Samsung Internet
1. 4 — 19.0: Поддерживается
2. 20: Поддерживается
Opera Mini
1. все: Не поддерживается

Mobile0130 10 — 12.1: Not supported

01% — Supported»> 73: Supported

UC Browser for Android

13.4: Supported

Android Browser

2.1 — 4.4.4: Not supported
111: Supported

Firefox Для Android

110: Поддерживается

QQ Browser

13,1: Поддержано

Baidu Browser

13.18: поддерживает

4999.

13.18: поддерживает

4999.

13.18: поддерживает

499

13.18: поддерживает

9499.

.0021

2.5: Поддерживается

00% — Supported»> 3: Поддерживается

Ресурсы:: Демо; Пример кода; Сообщение в блоге

us Режимы наложения | Как работать с режимами наложения?

Режимы наложения полезны для изменения цвета объектов путем добавления эффектов наложения и цветов к выбранным объектам. Режимы наложения работают в зависимости от положения объекта на слое или группе. Мы подробно обсудим все доступные режимы наложения в Adobe Illustrator. До этого было бы легко запомнить несколько терминов, пытаясь понять различные режимы наложения:

Исходный цвет выбранного объекта всей группы известен как Blend Color.
Базовый цвет относится к цветам, расположенным под альбомом с иллюстрациями.
Цвет, полученный после нанесения смеси, известен как Результирующий цвет .

Применение режимов наложения в Illustrator

Применять режимы наложения несложно; давайте разберемся в этом, выполнив следующие шаги.

Шаг 1: Первое, что нужно сделать, это перейти в меню Windows и выбрать прозрачность .

Шаг 2: Здесь вы заметили выскочившее маленькое окно, как показано ниже. Здесь вы будете применять большинство режимов наложения.

Шаг 3: Используя инструмент формы, создайте два круга и разместите их, как показано на рисунке ниже.

Шаг 4: Теперь мы применим все режимы наложения, предлагаемые в режиме прозрачности, к созданным кругам и посмотрим на результаты.

Шаг 5: Режим по умолчанию — нормальный. Он ничего не делает и просто сохраняет базовый цвет таким же, как вы его выбрали.

Шаг 6: Применяя затемнение, вы заметите, что перекрывающиеся части фигур становятся темнее. Он выбирает базовый или смешанный цвет на основе уровней темноты. Более светлые части, чем цвет наложения, изменяются, а более темные области остаются прежними.

Шаг 7: Он умножает смешанный цвет на базовый цвет, в результате чего получается более темный цвет. Если вы умножаете цвет на черный, он создает черный, а умножение на белые листья; цвет остается прежним.

Шаг 8: Затемнение затемняет перекрывающиеся области, чтобы отразить цвет смешения. Кроме того, если вы смешаете, используя белый цвет, это не внесет никаких изменений.

Шаг 9: Светлее выбирает более светлый цвет из основного или смешиваемого цвета. Если область темнее, чем цвет наложения, она будет заменена, а области, которые светлее, чем цвет наложения, останутся прежними.

Шаг 10: Экран увеличивает инверсию совмещенного и основного цветов. Это дает более светлый цвет на перекрывающихся областях. Если ваш экран черного цвета, вы не найдете никаких изменений, в то время как экран с белым цветом создаст белый цвет.

Шаг 11: Color Dodge увеличивает яркость основного цвета на основе совмещенного цвета. Это снова не имеет никакого эффекта, когда вы смешиваете с черным.

Шаг 12: В зависимости от цвета основы умножает или экранирует цвета. На текущую иллюстрацию накладываются цвета или узоры, при этом сохраняются основные блики и тени. Он смешивает смешанный цвет, чтобы отразить яркость или темноту исходного цвета.

Шаг 13: Делает цвета темнее или светлее в зависимости от смешиваемого цвета. Это создает эффект, похожий на рассеянный прожектор для вашего произведения искусства. Он может затемнять или осветлять цвета в зависимости от смешиваемого цвета. Если смешанный цвет светлее, рисунок становится светлым, а если темнее, рисунок становится темным.

Шаг 14. Жесткий свет создает эффект резкого прожектора на вашей работе, как показано на изображении ниже. В зависимости от цвета смеси он усиливает или экранирует цвета. Если цвет наложения светлый, цвет экрана будет выглядеть ярким, а если темный, то изображение станет темным. Этот метод эффективен для добавления бликов или теней к вашим работам.

Шаг 15: Либо смешанный цвет, либо основной цвет вычитаются друг из друга в зависимости от того, какой из них имеет более высокий уровень яркости. Однако при смешивании с белым он меняет основной цвет на противоположный, а при смешивании с черным изменений не происходит.

Шаг 16: Исключение создает эффект, идентичный разностному режиму; однако эффект имеет низкий контраст. При смешивании белого цвета основной цвет меняется на противоположный. А при смешивании черного вы вообще не заметите никаких изменений.

Шаг 17: При создании результирующего цвета учитываются яркость и насыщенность основного цвета. Кроме того, смешанный цвет также принимает значение оттенка.

Шаг 18: Учитывает яркость и оттенок основного цвета для получения конечного цвета. Для этого также используется насыщенность цвета наложения.

Шаг 19: В этом режиме результирующий цвет формируется из оттенка и насыщенности совмещенного цвета, а также яркости основного цвета. Этот режим может быть полезен при работе с монохромными произведениями искусства, требующими сохранения уровней серого, а также для работы с тонировкой.

Шаг 20: Создает результирующий цвет с оттенком и насыщенностью основного цвета и яркостью совмещенного цвета. Этот режим создает эффект, обратный эффекту цветового режима. Используя режим яркости, оттенок и насыщенность основного цвета и яркость совмещенного цвета объединяются для создания результирующего цвета. Он создает эффект, противоположный тому, который получается при использовании цветового режима. См. изображение ниже.

Заключение

Adobe Illustrator — один из самых эффективных и популярных редакторов векторной графики, которым пользуются миллионы профессионалов. Его используют дизайнеры, представители СМИ, художники и т.