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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

41.0+ x 32.0+ 8.0+ v


Считаете ли это полезным?

Похожие статьи