background-blend-mode
Оновлено: 15.12.2022
background-blend-mode
Визначає режим накладення фонового зображення на фоновий колір або інші фонові зображення. Припустимо вказувати кілька значень через кому, при цьому вони будуть застосовуватися до фонових зображень, перерахованих у background-image, у тому ж порядку.
Коротка інформація
| Значення за замовчуванням | normal |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
background-blend-mode: normal | multiply | screen | overlay | darken | lighten
| color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue
| saturation | color | luminosity
Значення
Значення, загалом, збігаються з режимами графічних редакторів. Нижче описи взяті з керівництва Adobe Photoshop.
Під час опису візуальних ефектів режиму накладення використовуються такі терміни, що позначають кольори.
- Основний колір - вихідний колір у зображенні.
- Поєднаний колір - колір зображення, що накладається.
- Результуючий колір - колір, отриманий у результаті накладення.
| normal | Звичайний. Не використовується змішування кольорів. Режим за замовчуванням. |
| multiply | Множення. У цьому режимі значення основного кольору множиться на значення суміщеного кольору. Результуючий колір завжди являє собою більш темний колір. У результаті множення значення будь-якого кольору на значення чорного кольору виробляється чорний колір. У результаті множення значення будь-якого кольору на значення білого кольору колір залишається незмінним. |
| screen | Освітлення. У цьому режимі перемножуються зворотні значення основного і суміщеного кольору. Як результуючий колір завжди застосовується більш світлий колір. У разі освітлення із застосуванням чорного кольору, колір залишається незмінним. У разі перекриття із застосуванням білого кольору, колір стає білим. Отриманий ефект аналогічний накладенню один на одного зображень численних фотографічних слайдів за допомогою проектора. |
| overlay | Перекриття. У цьому режимі кольори множаться або освітлюються залежно від основного кольору. Візерунки або кольори перекривають наявні пікселі, залишаючи незмінними світлі й темні ділянки основного кольору. Базовий колір не замінюється, а змішується з поєднаним кольором, що дає змогу відобразити наявність світлих або темних ділянок початкового кольору. |
| darken | Заміна темним. Як результуючий вибирається основний або суміщений колір, залежно від того, який із них темніший. Пікселі з кольором, світлішим порівняно з суміщеним, замінюються, а пікселі з кольором, темнішим порівняно з суміщеним, залишаються незмінними. |
| lighten | Заміна світлим. Як результуючий колір вибирається основний або суміщений колір, залежно від того, який із них світліший. Пікселі з темнішим кольором порівняно з суміщеним кольором замінюються, а пікселі зі світлішим кольором порівняно з суміщеним кольором залишаються незмінними. |
| color-dodge | Освітлення основи. Основний колір замінюється більш яскравим для відображення суміщеного кольору в результаті зменшення контрасту між двома кольорами. Змішування з чорним кольором не призводить до появи будь-яких змін. |
| color-burn | Затемнення основи. Основний колір замінюється більш темним для відображення суміщеного кольору в результаті збільшення контрасту між двома кольорами. Змішування з білим кольором не призводить до появи будь-яких змін. |
| hard-light | Спрямоване світло. У цьому режимі кольори множаться або освітлюються залежно від суміщеного кольору. Отриманий ефект аналогічний освітленню зображення різким світлом прожектора. Якщо суміщений колір (джерело світла) є світлішим, ніж 50% сірого, то зображення стає світлішим, як після освітлення. Цей ефект може застосовуватися для додавання світлих ділянок до зображення. Якщо суміщений колір (джерело світла) є більш темним, ніж 50% сірого, то зображення стає темнішим, як після множення. Цей ефект може застосовуватися для додавання темних ділянок до зображення. Накладання чисто-чорного або чисто-білого кольору призводить до отримання чисто-чорного або чисто-білого кольору. |
| soft-light | Розсіяне світло. У цьому режимі кольори стають темнішими або світлішими залежно від суміщеного кольору. Отриманий ефект аналогічний освітленню зображення розпливчастим світлом прожектора. Якщо суміщений колір (джерело світла) є більш світлим, ніж 50% сірого, то зображення стає світлішим, як після освітлення. Якщо суміщений колір є темнішим, ніж 50% сірого, зображення стає темнішим, як після затемнення. Накладення чисто-чорного або чисто-білого кольору створює виразні, темніші або світліші зони, але чистого чорного або білого кольору не вийде. |
| difference | Різниця. У цьому режимі віднімається або суміщений колір з основного кольору, або основний колір із суміщеного кольору залежно від того, який колір має більше значення яскравості. Змішування з білим кольором призводить до інвертування значень основного кольору, змішування з чорним кольором не тягне за собою будь-яких змін. |
| exclusion | Виняток. У цьому режимі створюється ефект, аналогічний тому, що створюється в режимі "Різниця", але характеризується більш низьким контрастом. Змішування з білим кольором призводить до інвертування значень основного кольору. Змішування з чорним кольором не призводить до появи будь-яких змін. |
| hue | Тон. В цьому режимі створюється результуючий колір з яскравістю і насиченістю основного кольору і колірним тоном суміщеного кольору. |
| saturation | Насиченість. У цьому режимі створюється результуючий колір з яскравістю і колірним тоном основного кольору і насиченістю суміщеного кольору. |
| color | Колір. Створюється результуючий колір з яскравістю основного кольору і з колірним тоном і насиченістю суміщеного кольору. Цей режим зберігає рівні сірого в зображенні і може застосовуватися для розфарбовування монохромних зображень і додавання відтінків до кольорових зображень. |
| luminosity | Яскравість. У цьому режимі створюється результуючий колір із колірним тоном і насиченістю основного кольору та яскравістю суміщеного кольору. Цей режим створює ефект інверсії кольору. |
Приклад
У цьому прикладі до <body> додається фонове зображення, розтягнуте на все вікно браузера, плюс вертикальний лінійний градієнт від блакитного до білого кольору. У результаті змішування фонового зображення і градієнта виходить однотонне зображення, яке поступово стає чорно-білим.
Об'єктна модель
Об'єкт.style.backgroundBlendMode
Примітка
Safari до версії 10 і iOS Safari до версії 10.3 не підтримують значення hue, saturation, color і luminosity.