Тип CSS `<blend-mode>`

<blend-mode> — это CSS тип данных, который описывает, как должны выглядеть цвета при наложении элементов друг на друга. Он используется в свойствах background-blend-mode и mix-blend-mode.

Синтаксис

Тип данных <blend-mode> определяется с помощью ключевого слова, выбранного из списка ниже.

Значения

normal

Итоговый цвет — это цвет верхнего слоя независимо от цвета нижнего слоя. Эффект напоминает наложение двух непрозрачных листов бумаги.

multiply

Итоговый цвет получается в результате умножения цветов верхнего и нижнего слоёв. Чёрный слой приводит к появлению чёрного итогового слоя, а белый слой не изменяет результат. Эффект напоминает наложение двух изображений, напечатанных на прозрачной плёнке.

screen

Итоговый цвет получается в результате инвертирования цветов, их умножения и инвертирования полученного значения. Чёрный слой не изменяет результат, а белый приводит к появлению белого итогового слоя. Эффект напоминает проецирование двух изображений на экран.

overlay

Итоговый цвет получается в результате multiply, если нижний цвет темнее, или screen, если нижний цвет светлее. Этот режим наложения эквивалентен hard-light, но слои в нём поменяны местами.

darken

Итоговый цвет состоит из самых тёмных значений каждого цветового канала.

lighten

Итоговый цвет состоит из самых светлых значений каждого цветового канала.

color-dodge

Итоговый цвет получается в результате деления нижнего цвета на инвертированный верхний цвет. Чёрный цвет переднего плана не изменяет результат. Цвет переднего плана, инвертированный относительно цвета фона, приводит к полностью освещённому цвету. Этот режим наложения похож на screen, но для получения полностью освещённого цвета цвет переднего плана должен быть лишь таким же светлым, как инвертированный цвет фона.

color-burn

Итоговый цвет получается в результате инвертирования нижнего цвета, деления значения на верхний цвет и инвертирования полученного значения. Белый цвет переднего плана не изменяет результат. Цвет переднего плана, инвертированный относительно цвета фона, приводит к появлению чёрного итогового изображения. Этот режим наложения похож на multiply, но для получения чёрного итогового изображения цвет переднего плана должен быть лишь таким же тёмным, как инвертированный цвет фона.

hard-light

Итоговый цвет получается в результате multiply, если верхний цвет темнее, или screen, если верхний цвет светлее. Этот режим наложения эквивалентен overlay, но слои в нём поменяны местами. Эффект похож на освещение фона жёстким прожектором.

soft-light

Итоговый цвет похож на hard-light, но мягче. Этот режим наложения работает аналогично hard-light. Эффект похож на освещение фона рассеянным прожектором.

difference

Итоговый цвет получается вычитанием более тёмного из двух цветов из более светлого. Чёрный слой не влияет на результат, а белый слой инвертирует цвет другого слоя.

exclusion

Итоговый цвет похож на difference, но с меньшей контрастностью. Как и в случае с difference, чёрный слой не влияет на результат, а белый слой инвертирует цвет другого слоя.

hue

Итоговый цвет использует тон верхнего цвета, а также насыщенность и светлоту нижнего цвета.

saturation

Итоговый цвет использует насыщенность верхнего цвета, а также тон и светлоту нижнего цвета. Чисто серый фон, не имеющий насыщенности, не повлияет на результат.

color

Итоговый цвет использует тон и насыщенность верхнего цвета, а также светлоту нижнего цвета. Эффект сохраняет уровни серого и может использоваться для раскрашивания переднего плана.

luminosity

Итоговый цвет использует светлоту верхнего цвета, а также тон и насыщенность нижнего цвета. Этот режим наложения эквивалентен color, но слои в нём поменяны местами.

Описание

Для каждого пикселя слоёв, к которым применяется режим наложения, берутся цвета переднего и заднего планов, выполняется вычисление, и возвращается новое значение цвета.

Переходы между режимами наложения не интерполируются. Любое изменение происходит мгновенно.

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

<blend-mode> = 
  normal |
  multiply |
  screen |
  overlay |
  darken |
  lighten |
  color-dodge |
  color-burn |
  hard-light |
  soft-light |
  difference |
  exclusion |
  hue |
  saturation |
  color |
  luminosity

Примеры

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

<div class="container"></div>

.container {
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

Задайте другие значения для background-blend-mode, чтобы получить разные результаты.

Сравнение разных значений свойства background-blend-mode

<div class="container"></div>

.container {
  width: 720px;
  height: 760px;
  display: grid;
  grid: auto-flow 190px / repeat(4, 180px);
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.container > div {
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.container div div {
  margin-left: 15px;
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
}

.container div p {
  line-height: 30px;
  margin: 0;
  color: #a33333;
  text-align: center;
}

const list = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
];

const containerElem = document.querySelector(".container");

list.forEach((item) => {
  const innerElem = document.createElement("div");
  innerElem.style.backgroundBlendMode = item;

  const textElem = document.createElement("p");
  textElem.innerText = item;

  const outerElem = document.createElement("div");
  outerElem.appendChild(textElem);
  outerElem.appendChild(innerElem);

  containerElem.appendChild(outerElem);
});

Создайте несколько элементов div, перебрав список, и задайте каждому из них своё значение backgroundBlendMode.

Сравнение разных значений свойства mix-blend-mode

<div class="container"></div>

.container {
  width: 640px;
  height: 800px;
  display: grid;
  grid: auto-flow 160px / repeat(4, 160px);
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.container > div {
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.container > div > div {
  position: relative;
  margin-left: 20px;
  width: 120px;
  height: 120px;
}

.container div p {
  margin: 0;
  line-height: 30px;
  color: #a33333;
  text-align: center;
}
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}

const list = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
  "plus-darker",
  "plus-lighter",
];

const containerElem = document.querySelector(".container");

list.forEach((item) => {
  const innerElem = document.createElement("div");
  innerElem.innerHTML = `
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
  `;

  innerElem.querySelectorAll(".circle").forEach((circle) => {
    circle.style.mixBlendMode = item;
  });

  const textElem = document.createElement("p");
  textElem.innerText = item;

  const outerElem = document.createElement("div");
  outerElem.appendChild(textElem);
  outerElem.appendChild(innerElem);

  containerElem.appendChild(outerElem);
});

В следующем примере мы создаём несколько элементов <div>, перебирая список, и задаём каждому из них разные значения mixBlendMode.

Сравнение режимов наложения

В следующем примере у нас есть <div> с двумя фоновыми изображениями: логотипом Firefox поверх линейного градиента. Ниже находится предоставленное меню <select>, которое позволяет изменить background-blend-mode, применённый к <div>, чтобы сравнить эффекты разных режимов наложения.

HTML

<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>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>

CSS

div {
  width: 300px;
  height: 300px;
  background:
    url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png")
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}

JavaScript

const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});

Результат

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

Совместимость с браузерами

См. также

• Модуль композитинга и наложения CSS, в котором определены значения <blend-mode>.
• Свойства, использующие этот тип данных: background-blend-mode, mix-blend-mode

Описания различных режимов наложения на других сайтах:

• Режимы наложения в Википедии
• Режимы наложения в Adobe Photoshop от Adobe