background-blend-mode

Пример

Укажите режим наложения фонового изображения, которое должно быть "lighten":

div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}

Попробуйте сами »

Определение background-blend-mode

CSS свойство background-blend-mode определяет режим наложения каждого фонового слоя (цвета и/или изображения).

Показ демо ❯

Значение по умолчанию:	normal
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.backgroundBlendMode="screen"

Поддержка background-blend-mode

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
background-blend-mode	35.0	79.0	30.0	7.1	22.0

Синтаксис background-blend-mode

Значения background-blend-mode

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

Примеры background-blend-mode

Пример

Укажите режим наложения, который должен быть "multiply":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "screen":

div {
width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "overlay":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "darken":

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "color-dodge":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "saturation":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "color":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "luminosity":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}

Попробуйте сами »

Пример

Укажите режим наложения, который должен быть "normal":

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}

Попробуйте сами »