background-blend-mode
Описание
Свойство background-blend-mode
описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
Режимы наложения должны быть определены в том же порядке что CSS свойство background-image
. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.
Начальное значение | normal |
---|---|
Применяется к | Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.. Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Синтаксис
Формальный синтаксис: <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 |