Mix-blend-mode - CSS-Tricks | Almanah CSS 2025

mix-blend-modeProprietatea definește modul în care conținutul unui element ar trebui să se amestece cu fundalul. De exemplu, textul unui

s-ar putea amesteca cu fundalul din spatele ei în moduri interesante.

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

În exemplul de mai sus, conținutul a fost modificat de, mix-blend-modeastfel încât culorile textului să fie excluse din fundal. Aceasta este doar una dintre multele valori pentru această proprietate.

Există o problemă cu Chrome 58+ în care mix-blend-modenu se afișează elementele care sunt setate pe un transparent . A fost trimis sub formă de ediție 711955 în Chrome, care este atribuit în momentul redactării acestui articol. Între timp, o soluție simplă este de a atribui o culoare de fundal albă (sau într-adevăr, oricare) elementului corpului.

Valori

initial: setarea implicită a proprietății care nu setează un mod de amestecare.
inherit: un element va moșteni modul de amestecare de la elementul său părinte.
unset: elimină modul de amestecare curent dintr-un element.
: acesta este atributul unuia dintre modurile de amestecare de sub:
normal: acest atribut nu aplică niciun amestec.
multiply: elementul este înmulțit cu fundalul și înlocuiește culoarea de fundal. Culoarea rezultată este întotdeauna la fel de închisă ca fundalul.
screen: înmulțește fundalul și conținutul completează apoi rezultatul. Acest lucru va avea ca rezultat un conținut mai luminos decât background-color.
suprapunere: înmulțește sau ecranează conținutul în funcție de culoarea de fundal. Acesta este inversul modului de amestecare cu lumină tare.
întunecați: fundalul este înlocuit cu conținutul în care conținutul este mai întunecat, altfel, este lăsat așa cum a fost.
lighten: fundalul este înlocuit cu conținutul în care conținutul este mai ușor.
color-dodge: acest atribut luminează culoarea de fundal pentru a reflecta culoarea conținutului.
color-burn: aceasta întunecă fundalul pentru a reflecta culoarea naturală a conținutului.
hard-light: în funcție de culoarea conținutului, acest atribut îl va ecraniza sau multiplica.
soft-light: în funcție de culoarea conținutului, acesta se va întuneca sau va lumina.
difference: aceasta scade cea mai întunecată dintre cele două culori din cea mai deschisă culoare.
exclusion: similar cu differencedar cu contrast mai mic.
hue: creează o culoare cu nuanța conținutului combinată cu saturația și luminozitatea fundalului.
saturation: creează o culoare cu saturația conținutului combinată cu nuanța și luminozitatea fundalului.
color: creează o culoare cu nuanța și saturația conținutului și luminozitatea fundalului.
luminosity: creează o culoare cu luminozitatea conținutului și nuanța și saturația fundalului. Acesta este inversul coloratributului.

Merită remarcat faptul că setarea unui alt mod de amestecare decât normalva genera un nou context de stivuire care trebuie apoi amestecat cu contextul de stivuire care conține elementul.

Efectul acestor valori este prezentat în demonstrația de mai jos:

Mai multe informatii

Bazele modurilor CSS Blend
mix-blend-mode pe MDN
mix-blend-mode pe W3C
O colecție de demonstrații CSS Blend Mode
Cunoașterea modurilor CSS Blend

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.