Свойство CSS mix-blend-mode

Свойство CSS mix-blend-mode определяет, как содержимое элемента смешивается с содержимым позади него — как правило, с background-color, background-image родительского элемента или с другим перекрывающимся элементом. Вместо того чтобы один слой просто перекрывал другой, браузер комбинирует их пиксели по математической формуле (multiply, screen, difference и т. д.) — так же, как работают режимы наложения в Photoshop.

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

Как работает наложение

Чтобы наложение было заметно, необходимо, чтобы два слоя перекрывались — например, <img> поверх цветного <div>. Режим наложения смешивает пиксели переднего плана с пикселями фона:

multiply затемняет — белый цвет переднего плана исчезает, тёмные области остаются. Подходит для теней и тонирования.
screen осветляет — чёрный исчезает, светлые области остаются. Противоположность multiply.
overlay сочетает оба эффекта: затемняет тёмные области и осветляет светлые, усиливая контраст.
difference / exclusion вычитают цвета, создавая инвертированные эффекты с высоким контрастом.
hue, saturation, color, luminosity смешивают один канал переднего плана (его оттенок, насыщенность и т. д.) с остальными характеристиками фона — удобно для перекраски изображений.

Всего существует 16 режимов наложения (перечислены в таблице Значения ниже).

Контекст наложения и изоляция

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

Из-за этого любое свойство, создающее контекст наложения (например, opacity менее 1, transform или position с z-index), может изменить результат наложения. Чтобы намеренно остановить смешивание элемента с тем, что находится позади него, задайте предку свойство isolation: isolate — это создаёт новый контекст наложения, изолируя эффект внутри него.

Совет

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

Начальное значение	normal
Применяется к	Всем элементам.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS1
DOM Синтаксис	object.style.mixBlendMode = "exclusion";

Синтаксис

Синтаксис свойства CSS mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Пример свойства mix-blend-mode:

Пример свойства CSS mix-blend-mode со значением multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

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

Пример свойства mix-blend-mode со значением "screen":

Пример свойства CSS mix-blend-mode со значением screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

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

Пример свойства mix-blend-mode со значением "color-dodge":

Пример свойства CSS mix-blend-mode со значением color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

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

Пример свойства mix-blend-mode со значением "hue":

Пример свойства CSS mix-blend-mode со значением hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>

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

Пример свойства mix-blend-mode со значением "normal":

Свойство CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

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

Пример mix-blend-mode со значением "hard-light":

Свойство CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

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

Пример mix-blend-mode со значением "difference":

Свойство CSS mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>

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

Значения

Значение	Описание
normal	Без наложения — элемент отображается поверх фона как обычно. Значение по умолчанию.
multiply	Перемножает цвета; результат всегда темнее. Белый не оказывает эффекта, чёрный остаётся чёрным.
screen	Инвертирует, перемножает и снова инвертирует; результат всегда светлее. Противоположность `multiply`.
overlay	`multiply` на тёмных областях и `screen` на светлых — усиливает контраст.
darken	Оставляет более тёмный из двух цветов для каждого канала.
lighten	Оставляет более светлый из двух цветов для каждого канала.
color-dodge	Осветляет фон, отражая цвет переднего плана.
color-burn	Затемняет фон, отражая цвет переднего плана.
hard-light	Как `overlay`, но со swapped слоями — эффект резкого прожектора.
soft-light	Более мягкая версия `hard-light`, похожая на рассеянный прожектор.
difference	Вычитает более тёмный цвет из более светлого; одинаковые цвета дают чёрный.
exclusion	Похоже на `difference`, но с меньшим контрастом.
hue	Оттенок переднего плана с насыщенностью и яркостью фона.
saturation	Насыщенность переднего плана с оттенком и яркостью фона.
color	Оттенок и насыщенность переднего плана с яркостью фона — перекрашивает с сохранением деталей.
luminosity	Яркость переднего плана с оттенком и насыщенностью фона.
initial	Устанавливает свойство в значение по умолчанию (`normal`).
inherit	Наследует значение от родительского элемента.

Связанные свойства

background-blend-mode — смешивает собственные фоновые слои элемента (изображения и цвет) между собой, а не с тем, что находится позади элемента.
isolation — создаёт контекст наложения, изолируя эффект наложения.
opacity и filter — другие способы изменить compositing элемента.

Практика

Что происходит, когда вы задаёте mix-blend-mode значение, отличное от 'normal'?

Для элемента создаётся новый контекст наложенияЭлемент также смешивается с содержимым за пределами своего контекста наложенияФоновые изображения элемента смешиваются друг с другомНичего не изменяется, если не задано также свойство opacity

Практика

Какой режим наложения всегда даёт более тёмный результат, при котором белый цвет переднего плана не оказывает эффекта?

multiplyscreennormalluminosity