CSS свойство background-blend-mode

Устанавливает режим наложения фонового изображения элемента на фоны других элементов.

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

CSS синтаксис

background-blend-mode: значение;

Возможные значения

ЗначениеОписание
normalЗначение по умолчанию. Обычный режим наложения.
multiplyРежим наложения умножением.
screenРежим наложения экраном.
overlayРежим наложения перекрытием.
darkenРежим наложения затемнением.
lightenРежим наложения заменой светлым.
color-dodgeРежим наложения осветлением основы.
saturationРежим наложения насыщенности.
colorРежим наложения цветности.
luminosityРежим наложения яркости.

Пример использования

Устанавливаем режим наложения фона


div { 
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat:no-repeat;
    background-image: linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
    background-blend-mode: color-dodge;
}