Свойство CSS background-blend-mode
Пример
Укажите режим наложения фонового изображения, чтобы он был «светлее»:
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство background-blend-modeопределяет режим наложения каждого фонового слоя (цвет и/или изображение).
| Значение по умолчанию: | нормальный |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Читать об анимации |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.backgroundBlendMode="экран" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
| Property | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
Синтаксис CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Значения свойств
| Value | Description | Play it |
|---|---|---|
| normal | This is default. Sets the blending mode to normal | |
| multiply | Sets the blending mode to multiply | |
| screen | Sets the blending mode to screen | |
| overlay | Sets the blending mode to overlay | |
| darken | Sets the blending mode to darken | |
| lighten | Sets the blending mode to lighten | |
| color-dodge | Sets the blending mode to color-dodge | |
| saturation | Sets the blending mode to saturation | |
| color | Sets the blending mode to color | |
| luminosity | Sets the blending mode to luminosity |
Дополнительные примеры
Пример
Укажите режим наложения «умножить»:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Пример
Укажите режим наложения «экран»:
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;
}
Пример
Укажите режим наложения «цвет»:
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