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


Властивість 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

multiply

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

screen

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

overlay

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

darken

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

lighten

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

color-dodge

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

saturation

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

color

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

luminosity

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

Значення без задання: normal
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.backgroundBlendMode="screen"

Переглядачі

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

35.0

0

30.0

7.1

22.0

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

53.0

54.0

8.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

В цьому прикладі показано декілька режимів накладання фонових шарів.

Синтаксис властивості

.box {


  background-image: url('image.jpg');


  background-color: #000;


  background-blend-mode: color;


}

Додаткові посилання