Режим смешивания - CSS-хитрости

mix-blend-modeСвойство определяет , как содержимое элемента должны сочетаться с его фоном. Например, текст

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

.blend ( mix-blend-mode: exclusion; )

В приведенном выше примере содержимое было изменено, mix-blend-modeтак что цвета текста исключены из его фона. Это лишь одно из многих значений этого свойства.

Существует проблема с Chrome 58+, из-за которой mix-blend-modeне выполняется рендеринг для элементов, для которых установлено значение прозрачности . Тикет был отмечен как Проблема 711955 в Chrome, которая назначена на момент написания этой статьи. А пока простое исправление - присвоить элементу body белый (или вообще любой) цвет фона.

Значения

initial: значение по умолчанию для свойства, которое не устанавливает режим наложения.
inherit: элемент наследует режим наложения от своего родительского элемента.
unset: удаляет текущий режим наложения из элемента.
: это атрибут одного из режимов наложения ниже:
normal: этот атрибут не применяет никакого смешивания.
multiply: элемент умножается на фон и заменяет цвет фона. Полученный цвет всегда такой же темный, как и фон.
screen: умножает фон, а затем содержимое дополняет результат. Это приведет к тому, что контент будет ярче, чем background-color.
наложение: умножает или отображает содержимое в зависимости от цвета фона. Это инверсия режима наложения жесткого света.
darken: фон заменяется содержимым, в котором содержимое темнее, в противном случае оно остается таким, как было.
lighten: фон заменяется содержимым с более светлым содержимым.
color-dodge: этот атрибут увеличивает яркость фона, чтобы отразить цвет содержимого.
color-burn: это затемняет фон, чтобы отразить естественный цвет содержимого.
hard-light: в зависимости от цвета содержимого этот атрибут будет отображать или умножать его.
soft-light: в зависимости от цвета содержимого он будет темнее или светлее.
difference: это вычитает более темный из двух цветов из самого светлого.
exclusion: аналогично, differenceно с меньшей контрастностью.
hue: создает цвет с оттенком содержимого в сочетании с насыщенностью и яркостью фона.
saturation: создает цвет с насыщенностью содержимого в сочетании с оттенком и яркостью фона.
color: создает цвет с оттенком и насыщенностью содержимого и яркостью фона.
luminosity: создает цвет, соответствующий яркости содержимого, а также оттенку и насыщенности фона. Это обратное colorатрибуту.

Стоит отметить, что установка режима normalналожения, отличного от того, будет генерировать новый контекст наложения, который затем должен быть смешан с контекстом наложения, содержащим элемент.

Эффект от этих значений показан в демонстрации ниже:

Дополнительная информация

Основы режимов наложения CSS
режим смешивания на MDN
режим смешивания на W3C
Коллекция демонстраций CSS Blend Mode
Знакомство с режимами наложения CSS

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

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