СSS Свойство background-blend-mode
Пример
Укажите режим наложения, который должен быть "lighten":
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 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | 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 | Это значение по умолчанию. Задает режим наложения на нормальный | Воспроизвести » |
| multiply | Устанавливает режим наложения для умножения | Воспроизвести » |
| screen | Устанавливает режим наложения на экран | Воспроизвести » |
| overlay | Задает режим наложения на верхний слой | Воспроизвести » |
| darken | Устанавливает режим наложения для затемнения | Воспроизвести » |
| lighten | Устанавливает режим наложения для осветления | Воспроизвести » |
| color-dodge | Устанавливает режим наложения на цвет изворачиваться | Воспроизвести » |
| saturation | Устанавливает режим наложения на насыщенность | Воспроизвести » |
| color | Устанавливает режим наложения на цвет | Воспроизвести » |
| luminosity | Устанавливает режим наложения на яркость | Воспроизвести » |
Примеры
Пример
Укажите режим наложения, который должен быть " multiply":
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;
}
Попробуйте сами »
Пример
Укажите режим наложения, который должен быть "darken":
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;
}
Попробуйте сами »
Пример
Укажите режим наложения, который должен быть "saturation":
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;
}
Попробуйте сами »
Пример
Укажите режим наложения, который должен быть "luminosity":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Попробуйте сами »
Пример
Укажите режим наложения, который должен быть "normal":
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
