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

CSS свойства

Определение и применение

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

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
background-blend-modecss335.030.022.07.1*НетНет
У браузера Safari отсутствует поддержка следующих значений свойства: hue, saturation, color и luminosity.

CSS синтаксис:

background-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: "multiply, screen

JavaScript синтаксис:

object.style.backgroundBlendMode = "normal"

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

ЗначениеОписание
normalУстанавливает режим смешивания на нормальный. Данное значение установлено по умолчанию.
multiplyУстанавливает режим смешивания multiply (режим затемнения).
screenУстанавливает режим смешивания screen (режим осветления).
overlayУстанавливает режим смешивания overlay (режим контраста).
darkenУстанавливает режим смешивания darken (режим затемнения).
lightenУстанавливает режим смешивания lighten (режим осветления).
color-dodgeУстанавливает режим смешивания color-dodge (режим осветления).
color-burnУстанавливает режим смешивания color-burn (режим затемнения).
hard-lightУстанавливает режим смешивания hard-light (режим контраста).
soft-lightУстанавливает режим смешивания soft-light (режим контраста).
differenceУстанавливает режим смешивания difference (режим сравнения).
exclusionУстанавливает режим смешивания exclusion (режим сравнения).
hueУстанавливает режим смешивания hue (компонентный режим).
saturationУстанавливает режим смешивания saturation (компонентный режим).
colorУстанавливает режим смешивания color (компонентный режим).
luminosityУстанавливает режим смешивания liminosity (компонентный режим).

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Интерактивный пример

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

















CSS код:

div {
background-blend-mode: ;
background-image: url('/css/primer/997.png');
background-color: green;
background-position: center;
background-repeat: no-repeat;
height: 150px;
}

Результат:

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-blend-mode</title>
<style> 
.blendingMode {
height: 200px;
background-image: url('/css/primer/997.png');
background-repeat: no-repeat;
background-color: orange;
background-position: center;
background-blend-mode: multiply;
}
</style>
</head>
	<body>
		<div class = "blendingMode"></div>
	</body>
</html>

С использованием свойства background-blend-modecss3 и значения "multiply" мы получили следующий результат:

CSS свойства