W3Docs

Тема

Русский

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

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

В CSS доступно 16 режимов смешивания. Если для элемента задано значение, отличное от “normal” (значение по умолчанию), для этого элемента будет создан новый контекст наложения. Затем вновь сформированная группа должна смешиваться с контекстом наложения, который содержит элемент. Элемент не будет смешиваться с содержимым, находящимся вне контекста наложения.

Любое свойство, которое приводит к созданию контекста наложения, может влиять на смешивание.

Для изоляции элемента можно использовать свойство isolation.

TIP

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

Initial Valuenormal
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.mixBlendMode = "exclusion";

Синтаксис ​

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

css
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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Try it Yourself »

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

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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Try it Yourself »

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

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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Try it Yourself »

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

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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Try it Yourself »

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

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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Try it Yourself »

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

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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Try it Yourself »

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

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

html
<!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="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Try it Yourself »

Значения ​

ValueDescription
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Наследует свойство от родительского элемента.

Practice ​

Which of the following browser versions do not support the CSS mix-blend-mode property?

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

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.