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

❮ Назад Вперед ❯

Свойство mix-blend-mode определяет режим смешивания контента элемента с фоном родительского элемента. Для смешивания необходимо иметь background-image, background-color или <img>.

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

Значение по умолчанию	normal
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.mixBlendMode = "exclusion";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

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

В следующем примере установлено значение "screen":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

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

Пример со значением "color-dodge":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</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>

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

Пример со значением "hue":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree">
    </div>
  </body>
</html>

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

Значения

Значение	Описание
normal	Режим смешивания установлен на normal (обычный). Значение по умолчанию.
multiply	Режим смешивания установлен на multiply (умножение).
screen	Режим смешивания установлен на screen (осветление).
overlay	Режим смешивания установлен на overlay (перекрытие).
darken	Режим смешивания установлен на darken (замена темным).
lighten	Режим смешивания установлен на lighten (замена светлым).
color-dodge	Режим смешивания установлен на color-dodge (осветление основы).
color-burn	Режим смешивания установлен на color-burn (затемнение основы).
exclusion	Режим смешивания установлен на exclusion (исключение).
difference	Режим смешивания установлен на difference (разница).
hue	Режим смешивания установлен на hue (тон).
saturation	Режим смешивания установлен на saturation (насыщенность).
color	Режим смешивания установлен на color (цвет).
luminosity	Режим смешивания установлен на luminosity (яркость).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.