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

Определение и использование

background-blend-mode Определение свойства устанавливает режим комбинирования каждого слоя фона (цвета и/или изображения).

См. также:

CSS Урок:Фон CSS

Пример

Установите режим комбинирования фона на "lighten" (осветление):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

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

См. также примеры TIY в конце страницы.

Грамматика CSS

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

Значение свойства

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

Технические детали

Значение по умолчанию: normal
Инheritability: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.backgroundBlendMode="screen"

Более сложные примеры

Пример

Установите режим смешивания на "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

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

Пример

Установите режим смешивания на "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

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

Пример

Установите режим смешивания на "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

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

Пример

Установите режим смешивания на "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

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

Пример

Установите режим смешивания на "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

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

Пример

Установите режим смешивания на "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

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

Пример

Установите режим смешивания на "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

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

Пример

Установите режим смешивания на "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

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

Пример

Установите режим смешивания на "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

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

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1