Атрибут background-blend-mode в CSS

9 червня 2022 р.349

Зміст

Визначає режим накладання фонового зображення на колір фону або інші фонові зображення. Допустимо вказувати кілька значень через кому, при цьому вони будуть застосовуватися до фонових зображень, перерахованих у background-image, в тому ж порядку.

Коротка інформація

Значення за замовчуванням	normal
Успадковується	Ні
Застосовується	До всіх елементів
Анімується	Ні

Синтаксис

<code>background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

Значення, загалом, збігаються з режимами графічних редакторів. Нижче описи взяті з Посібники 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: Яскравість. У цьому режимі створюється результуючий колір з тоном кольору і насиченістю основного кольору і яскравістю суміщеного кольору. Цей режим створює ефект інверсії кольору.

Пісочниця

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-blend-mode</title> <style> body { background: /* Параметри фонового зображення */
url(/example/image/aquaria.jpg) center /cover no-repeat fixed, linear-gradient(#00A8DE, #FFF) fixed; /* Градієнт */
background-blend-mode: luminosity; /* Режим накладання */
}
</style>
</head>
<body>
</body>
</html>

У даному прикладі до <body> додається фонове зображення, розтягнуте на все вікно браузера, плюс вертикальний лінійний градієнт від блакитного до білого кольору. В результаті змішування фонового зображення та градієнта виходить однотонне зображення, яке поступово стає чорно-білим. Результат прикладу продемонстрований на мал. 1.

Вигляд фону

Мал. 1. Вид фону

Об'єктна модель

Об'єкт .style.backgroundBlendMode

Примітка

Safari до версії 10 та iOS Safari до версії 10.3 не підтримують значення hue, saturation, color та luminosity.

Специфікація

Специфікація	Статус
Compositing and Blending Level 1	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


		35	22	7.1	10.1	30


	62		8	10.3

Браузери

У таблиці браузерів застосовуються такі позначення.

— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення або властивість застосовується не до всіх елементів, які вказані у специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується. field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Колір та фон

Див. також

mix-blend-mode