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
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;
}