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, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.