background-blend-mode

Описание

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

Режимы наложения должны быть определены в том же порядке что CSS свойство background-image. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.

Начальное значениеnormal
Применяется кВсе элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Синтаксис

Формальный синтаксис:  <blend-mode>#
где 
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
background-blend-mode: normal;               /* Одно значение */
background-blend-mode: darken, luminosity;   /* Два значение, по одному на каждый фон */

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Значения

<blend-mode>
<blend-mode> обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.

Пример

<select id="select">     <option>normal</option>     <option>multiply</option>     <option selected>screen</option>     <option>overlay</option>     <option>darken</option>     <option>lighten</option>     <option>color-dodge</option>     <option>color-burn</option>     <option>hard-light</option>     <option>soft-light</option>     <option>difference</option>     <option>exclusion</option>     <option>hue</option>     <option>saturation</option>     <option>color</option>     <option>luminosity</option> </select> 
#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: screen;
}
document.getElementById("select").onchange = function(event) {
    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}
console.log(document.getElementById('div'));

Спецификации

Спецификация Статус Комментарий
Compositing and Blending Level 1
Определение 'background-blend-mode' в этой спецификации.		 Кандидат в рекомендации Первоначальная спецификация

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 35 30.0 (30.0) Нет 22 7.1
Особенность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка Нет 30.0 (30.0) Нет 22 iOS 8

Смотрите также