w3docs logo

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

Background-blend-mode это CSS свойство, которое определяет режим смешивания разных background images, а также смешивание с background-color. Имеет 10 значений: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. Значение по умолчанию - normal.

Значение по умолчанию normal
Применяется Ко всем элементам, а также к ::first-letter и к ::first-line.
Наследуется Нет.
Анимируемое Нет
Версия CSS3
DOM Syntax object.style.backgroundBlendMode = "luminosity";

Syntax

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: normal;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

В следующем примере используется значение "screen". Попробуйте и сами увидите, как смешиваются фоновые изображения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: screen;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: color-dodge;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: multiply;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Значения

Значение Описание
normal Устанавливает режим смешивания на normal.
multiply Устанавливает режим смешивания на multiply.
screen Устанавливает режим смешивания на screen.
overlay Устанавливает режим смешивания на overlay.
darken Устанавливает режим смешивания на darken.
lighten Устанавливает режим смешивания на lighten.
color-dodge Устанавливает режим смешивания на color-dodge.
saturnation Устанавливает режим смешивания на saturation.
color Устанавливает режим смешивания на color.
luminosity Устанавливает режим смешивания на luminosity.

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

chrome firefox safari opera
35+ 30+ 10.1+ 22+

Практикуйте свои знания

Какой свойство CSS позволяет изменить метод смешивания между фоновым изображением и цветом фона элемента?
Считаете ли это полезным?