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 свойства
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?