<blend-mode>

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Тип данных <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 {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

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

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

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

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

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

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

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

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

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

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

Пример использования "color-dodge"

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

Пример использования "color-burn"

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

Пример использования "hard-light"

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

Пример использования "soft-light"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В следующем примере у нас есть <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;
});

Результат

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

Спецификация
Уровни композиции и смешивания 2 # ltblendmodegt

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`blend-mode`	35	79	30	22	8	59	54	22	8	7.0	59

См. также

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

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

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode