Mix-blend-mode - CSS-хитрощі | Альманах CSS 2025

mix-blend-modeВластивість визначає , як вміст елемента повинні поєднуватися з його фоном. Наприклад, текст a

може цікаво поєднуватися з фоном за ним.

.blend ( mix-blend-mode: exclusion; )

У наведеному вище прикладі зміст змінено таким mix-blend-modeчином, що кольори тексту виключені з його фону. Це лише одне з багатьох значень для цієї властивості.

Існує проблема з Chrome 58+, де mix-blend-modeне відображається на елементах, які встановлені на прозорому . Цей файл було встановлено як випуск 711955 у Chrome, який призначався на момент написання цієї статті. Тим часом простим виправленням є присвоєння елементу тіла білого (або насправді будь-якого) кольору фону.

Цінності

initial: налаштування за замовчуванням для властивості, яка не встановлює режим змішування.
inherit: елемент успадкує режим змішування від батьківського елемента.
unset: видаляє поточний режим змішування з елемента.
: це атрибут одного з режимів накладання нижче:
normal: цей атрибут не застосовує жодного змішування.
multiply: елемент множиться на фон і замінює колір фону. Отриманий колір завжди такий же темний, як і фон.
screen: множить фон і вміст, а потім доповнює результат. Це призведе до вмісту, який буде яскравішим за background-color.
накладання: примножує або екранує вміст залежно від кольору фону. Це зворотне значення режиму накладання жорсткого світла.
затемнення: фон замінюється вмістом, де вміст темніший, інакше його залишають таким, яким він був.
lighten: фон замінюється вмістом, де вміст світліший.
color-dodge: цей атрибут покращує колір фону, щоб відображати колір вмісту.
color-burn: це затемнює фон, щоб відображати природний колір вмісту.
hard-light: залежно від кольору вмісту цей атрибут відображатиме або примножуватиме його.
soft-light: залежно від кольору вмісту це темніє або освітлює.
difference: це віднімає темніший із двох кольорів із найсвітлішого.
exclusion: подібний до, differenceале з меншим контрастом.
hue: створює колір з відтінком вмісту в поєднанні з насиченістю та яскравістю фону.
saturation: створює колір із насиченістю вмісту у поєднанні з відтінком та яскравістю фону.
color: створює колір з відтінком та насиченістю вмісту та яскравістю фону.
luminosity: створює колір зі світністю вмісту та відтінком та насиченістю фону. Це зворотне значення colorатрибута.

Варто зазначити, що встановлення режиму змішування, відмінного від normalгенерує новий контекст стекування, який потім повинен змішуватися з контекстом стекування, що містить елемент.

Вплив цих значень показано в демонстраційній демонстрації нижче:

Більше інформації

Основи режимів змішування CSS
mix-blend-mode на MDN
mix-blend-mode на W3C
Колекція демонстрацій CSS Blend Mode
Ознайомлення з режимами змішування CSS

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.