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;
}