CSS background-blend-mode Свойство
Пример
Укажите режим наложения "осветление":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Подробнее примеры ниже.
Определение и использование
Свойство background-blend-mode определяет режим наложения каждого фонового слоя (цвет и/или изображение).
| Значение по умолчанию: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.backgroundBlendMode="screen" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | Не поддерживается | 30.0 | 7.1 | 22.0 |
Синтаксис CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Значения свойств
| Значение | Описание | |
|---|---|---|
| normal | Это значение по умолчанию. Установка режима смешивания в нормуl | |
| multiply | Установка режима наложения для умножения | |
| screen | Установка режима наложения на экран | |
| overlay | Устанавливает режим наложения на наложение | |
| darken | Установка режима наложения для затемнения | |
| lighten | Установка режима наложения для осветления | |
| color-dodge | Устанавливает режим смешивания в Color-Dodge | |
| saturation | Установка режима наложения на насыщение | |
| color | Устанавливает режим наложения на цвет | |
| luminosity | Установка режима наложения на яркость |
Другие примеры
Пример
Укажите режим наложения "умножить":
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;
}
Пример
Укажите режим наложения "затемнение":
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;
}
Пример
Укажите режим наложения "насыщенность":
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;
}
Пример
Укажите режим наложения "яркость":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Пример
Укажите режим наложения "нормальный":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
Похожие страницы
CSS Справочник: CSS Background