Визначає режим накладання вихідного кольору на фоновий колір або фонове зображення.
Коротка інформація
| Значення за замовчуванням | normal | ||||
|---|---|---|---|---|---|
| Успадковується | Ні | ||||
| Застосовується | До всіх елементів | ||||
| Анімується | Ні |
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| 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
- Яскравість. У цьому режимі створюється результуючий колір з тоном кольору і насиченістю основного кольору і яскравістю суміщеного кольору. Цей режим створює ефект інверсії кольору.
Пісочниця
div { background: #C8EAF5 ; }
img { mix-blend-mode: <span class="playground-active">{{ playgroundValue }}</span>; }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mix-blend-mode</title> <style> div { background: url(/example/image/aquaria.jpg) center no-repeat; /* Параметри тла */
text-align: center; /* Вирівнювання по центру */
}
div h1 { font: bold 4em Verdana, Helvetica, sans-serif; /* Параметри шрифту */
padding: 0.5em; /* Поля навколо тексту */
margin: 0; /* Обнулюємо */
background: #fff; /* Білий колір фону */
mix-blend-mode: lighten; /* Режим накладання */
}
</style>
</head>
<body> <div><h1>Акваріум</h1></div>
</body>
</html>У цьому прикладі на фонове зображення накладається текст із білим фоном, який закриває собою зображення. Режим накладання lighten залишає лише світлі кольори і оскільки колір тексту за промовчанням чорний, то виходять кольорові літери на білому тлі (мал. 1).
Мал. 1. Текст після накладання на тло
Об'єктна модель
Об'єкт.style.mixBlendMode
Примітка
Safari та iOS Safari не підтримують значення hue, saturation, color та luminosity.
Специфікація
| Специфікація | Статус |
|---|---|
| Compositing and Blending Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 41 | 29 | 7.1 | 32 |
| 32 | 8 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації. .