css властивість background-blend-mode

Властивість background-blend-mode встановлює режим накладання фонового шару до зображення. Наочно це продемонстровано на малюнку нижче.

Для накладання шарів обов'язковою умовою є те, щоб шарів було два чи більше. Якщо шарів задано більше двох, є можливість застосувати декілька режимів змішування перерахувавши їх через кому.

Якщо примітивно описати роботу цієї властивості, то за допомогою background-image ми задаємо кілька шарів, а потім background-blend-mode робить верхній шар напівпрозорим (звісно логіка складніша і накладання відбудеться за якимось алгоритмом), що дозволяє показати нижче покладені шари.

Властивість background-blend-mode аналогічний режимам накладення шарів в фотошопі, якщо Ви користувалися фотошопом то список можливих значень Вам здасться знайомим.

Ця властивість впливає лише на саме тло, а не на вміст елементу.

Інколи цю властивість використовують, щоб підігнати картинку під дизайн сайту. Для цього також можна використати фільтри.

правити

+ додати пораду чи нотатку

Синтаксис

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Властивість background-blend-mode може отримувати 10 значень:

normal

Встановлює режим накладання normal

автор: Svitlana

правити

multiply

Режим множення. Працює шляхом множення рівнів яскравості пікселів верхнього шару з пікселями нижчих шарів. Дуже добре підходить для створення тіней і видалення білих і інших світлих тонів (зберігаючи при цьому більш темні кольори). Множення будь-якого кольору на чорний дає чорний. Множення будь-якого кольору на білий зберігає оригінальний колір.

автор: Svitlana

правити

screen

Режим екрану. Ефект аналогічний режиму lighten з відзнакою в тому, що видаляє більше темних пікселів, створюючи плавний перехід. Працює як режим multiply, але видаляє темні тони.

автор: Svitlana

правити

overlay

Режим перекриття. Використовує комбінацію режиму накладення screen для більш світлих пікселів, і режим накладення multiply для темних пікселів. Так як режим працює в середньому діапазоні цих двох режимів, то півтони (50% сірого) стають прозорими.

автор: Svitlana

правити

darken

Режим затемнення. Якщо пікселі верхнього шару темніші, ніж на нижчих шарах, вони зберігаються в зображенні. Якщо пікселі в верхньому шарі світліші, вони замінюються на більш темні пікселі нижнього шару, тому в основному зберігаються темні тони всіх шарів.

автор: Svitlana

правити

lighten

Режим заміни світлим. Темні пікселі верхнього шару замінюються на світлі пікселі нижчих шарів. Світлі пікселі не замінює.

автор: Svitlana

правити

color-dodge

Режим освітлення основи. Насичує світлі тони і відблиски. Темні області зображення залишаються без змін.

автор: Svitlana

правити

saturation

Режим насиченості. Створює колір з насиченістю початкового кольору і відтінком і яскравістю нижчого колірного фону. Сірі відтінки залишаються без змін.

автор: Svitlana

правити

color

Режим кольоровості. Створює колір з відтінком і насиченістю початкового кольору і яскравість нижчого колірного фону. Зберігає сірі тони нижчих шарів.

автор: Svitlana

правити

luminosity

Режим яскравості. Створює колір з яскравістю вихідного кольору і відтінком і насиченістю нижчого колірного фону. Ефект протилежний режиму color.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
background-blend-mode	35.0	30.0	7.1	22.0	0

Підтримка: мобільні переглядачі

Переглядач
background-blend-mode	53.0	54.0	8.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box normal">без змішування</div>
<div class="box blend">blend-mode: color</div>

.box {
    display: inline-block;
    width: 180px;
    height: 100px;
    padding: 8px;
    color: #fff;
    background-image: linear-gradient(45deg, #ff8a00, #e52e71);
    background-color: #004643;
}

.blend {
    background-blend-mode: color;
}