background-blend-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS-свойство background-blend-mode описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

Интерактивный пример

background-blend-mode: normal;

background-blend-mode: multiply;

background-blend-mode: hard-light;

background-blend-mode: difference;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
  </div>
</section>

#example-element {
  background-color: green;
  background-image: url("/shared-assets/images/examples/balloon.jpg");
  width: 250px;
  height: 305px;
}

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

Cинтаксис

css

/* Одно значение */
background-blend-mode: normal;

/* Два значения, по одному на каждый фон */
background-blend-mode: darken, luminosity;

/* Глобальные значения */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: revert;
background-blend-mode: unset;

Значения

<blend-mode>: Применяемый режим наложения. Можно указать несколько значений, разделённых запятыми.

Формальное определение

Начальное значение	`normal`
Применяется к	Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.. Это также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Обработка значения	как указано
Animation type	Not animatable

Формальный синтаксис

background-blend-mode = 
  <mix-blend-mode>#

Примеры

Простой пример

css

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

Попробуйте разные режимы смешивания

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));

Спецификации

Specification
Compositing and Blending Level 2 # background-blend-mode