Свойство CSS background-blend-mode
background-blend-mode — это свойство CSS, которое определяет режим наложения фоновых изображений друг на друга и на цвет фона. Оно имеет 10 значений: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. Значение по умолчанию — normal.
Если задано несколько фоновых слоев и для них указан список режимов наложения, background-blend-mode должен применяться в том же порядке, что и background-image. Если значений недостаточно для всех слоев, список значений должен повторяться до тех пор, пока их не станет достаточно.
Свойство background-blend-mode используется для смешивания фоновых слоев.
| Начальное значение | normal |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.backgroundBlendMode = "luminosity"; |
Синтаксис
Синтаксис свойства CSS background-blend-mode
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;Пример свойства background-blend-mode:
Пример свойства CSS background-blend-mode со значением normal
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: normal;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Результат
В следующем примере попробуйте и посмотрите, как смешиваются фоновые изображения:
Пример свойства background-blend-mode со значением "screen":
Пример свойства CSS background-blend-mode со значением screen
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: screen;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Пример свойства background-blend-mode со значением "color-dodge":
Пример свойства CSS background-blend-mode со значением color-dodge
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: color-dodge;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Пример свойства background-blend-mode со значением "multiply":
Пример свойства CSS background-blend-mode со значением multiply
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: multiply;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Пример свойства background-blend-mode со значением "overlay":
Пример свойства background-blend-mode со значением "overlay":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: overlay;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Пример свойства background-blend-mode со значением "darken":
Пример свойства background-blend-mode со значением "darken":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: darken;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Пример свойства background-blend-mode со значением "saturation":
Пример свойства background-blend-mode со значением "saturation":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://ru.w3docs.com/build/images/w3docs-logo-black.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: saturation;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| normal | Устанавливает режим наложения normal. | Попробовать » |
| multiply | Устанавливает режим наложения multiply. | Попробовать » |
| screen | Устанавливает режим наложения screen. | Попробовать » |
| overlay | Устанавливает режим наложения overlay. | Попробовать » |
| darken | Устанавливает режим наложения darken. | Попробовать » |
| lighten | Устанавливает режим наложения lighten. | Попробовать » |
| color-dodge | Устанавливает режим наложения color-dodge. | Попробовать » |
| saturation | Устанавливает режим наложения saturation. | Попробовать » |
| color | Устанавливает режим наложения color. | Попробовать » |
| luminosity | Устанавливает режим наложения luminosity. | Попробовать » |
Практика
Что делает свойство CSS background-blend-mode?