Свойство background-blend-mode
Определяет режим наложения каждого фонового слоя при использовании нескольких фоновых изображений или при использовании фонового цвета + фоновые изображения
background-blend-mode: darken;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
background-blend-mode: normal;
Обычное поведение наложения фонов.
Список всех возможных значений: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity
<div class="example-1"></div>
<style>
.example-1 {
width: 300px;
height: 162px;
background-image: url("https://htmlbase.ru/storage/app/media/html5-css3.png"), linear-gradient(to right, #000, #444);
background-blend-mode: normal;
}
</style>background-blend-mode: darken;
<div class="example-2"></div>
<style>
.example-2 {
width: 300px;
height: 162px;
background-image: url("https://htmlbase.ru/storage/app/media/html5-css3.png"), linear-gradient(to right, #000, #444);
background-blend-mode: darken;
}
</style>background-blend-mode: multiply;
<div class="example-3"></div>
<style>
.example-3 {
width: 300px;
height: 162px;
background-image: url("https://htmlbase.ru/storage/app/media/html5-css3.png"), linear-gradient(to right, #000, #444);
background-blend-mode: multiply;
}
</style>background-blend-mode: overlay;
<div class="example-4"></div>
<style>
.example-4 {
width: 300px;
height: 162px;
background-image: url("https://htmlbase.ru/storage/app/media/html5-css3.png"), linear-gradient(to right, #000, #444);
background-blend-mode: overlay;
}
</style>