Фоновый режим наложения - CSS-хитрости

В background-blend-modeопределяет свойство , каким образом элемента background-imageдолжно сочетаться с его background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

См. Pen background-blend-mode от CSS-Tricks (@ css-tricks) на CodePen.

В приведенной выше демонстрации по умолчанию background-imageслева не установлен режим наложения, поэтому изображение перекрывает background-color. Справа, однако, режим наложения изменился background-imageс красным цветом background-colorвнизу. Но обратите внимание, что это дополнительное свойство не повлияло на цвет текста.

Значения

initial: значение по умолчанию без смешивания.
inherit: наследует режим наложения родительского элемента.
: значение, которое изменит фоновое изображение в зависимости от его цвета фона.

Значение может быть установлено в любом из следующих (в демосе ниже background-colorкрасный цвет):

`luminosity`: яркость верхнего цвета сохраняется при использовании насыщенности и оттенка фонового цвета.

Демо

Вот рабочий пример того, как эти значения интерпретируются в зависимости от background-color:

См. Режим наложения Pen Background от CSS-Tricks (@ css-tricks) на CodePen.

Объединение нескольких режимов наложения

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

См. Раздел «Градиенты пера» и «background-blend-mode» от CSS-Tricks (@ css-tricks) на CodePen.

Это достигается перечислением этих значений в порядке фонового слоя, который вы хотите изменить:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Первый линейный градиент имеет screenрежим наложения, за ним следует второй линейный градиент differenceи первое фоновое изображение, которое было lightenприменено к нему.