Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии