Mix-blend-mode - CSS-tricks | CSS Almanack 2025

Den mix-blend-modeegenskapen definierar hur ett element innehåll ska smälta med sin bakgrund. Till exempel texten till a

kunde smälta in i bakgrunden på intressanta sätt.

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

I exemplet ovan har innehållet modifierats av mix-blend-modeså att färgerna på texten utesluts från dess bakgrund. Detta är bara ett av många värden för den här egenskapen.

Det finns ett problem med Chrome 58+ där det mix-blend-modeinte återges för element som är inställda på en transparent . Den har biljett som utgåva 711955 i Chrome, som tilldelas när detta skrivs. Under tiden är en enkel lösning att tilldela en vit (eller egentligen vilken som helst) bakgrundsfärg till kroppselementet.

Värden

initial: standardinställningen för egenskapen som inte ställer in ett blandningsläge.
inherit: ett element ärver blandningsläget från dess överordnade element.
unset: tar bort det aktuella blandningsläget från ett element.
: detta är attributet för ett av blandningslägena nedan:
normal: detta attribut gäller ingen blandning alls.
multiply: elementet multipliceras med bakgrunden och ersätter bakgrundsfärgen. Den resulterande färgen är alltid lika mörk som bakgrunden.
screen: multiplicerar bakgrunden och innehållet kompletterar sedan resultatet. Detta kommer att resultera i innehåll som är ljusare än background-color.
overlay: multiplicerar eller skärmar innehållet beroende på bakgrundsfärgen. Detta är det omvända av blandningsläget för hårt ljus.
mörkare: bakgrunden ersätts med innehållet där innehållet är mörkare, annars lämnas det som det var.
lighten: bakgrunden ersätts med innehållet där innehållet är ljusare.
color-dodge: detta attribut lyser bakgrundsfärgen för att återspegla innehållets färg.
color-burn: detta mörknar bakgrunden för att återspegla innehållets naturliga färg.
hard-light: beroende på innehållets färg kommer detta attribut att skärma eller multiplicera det.
soft-light: beroende på färg på innehållet blir detta mörkare eller ljusare.
difference: detta subtraherar den mörkare av de två färgerna från den ljusaste färgen.
exclusion: liknar differencemen med lägre kontrast.
hue: skapar en färg med innehållets nyans i kombination med mättnad och ljusstyrka i bakgrunden.
saturation: skapar en färg med innehållets mättnad i kombination med bakgrundens nyans och ljusstyrka.
color: skapar en färg med nyans och mättnad av innehållet och bakgrundens ljusstyrka.
luminosity: skapar en färg med innehållets ljusstyrka och bakgrundens nyans och mättnad. Detta är det omvända av colorattributet.

Det är värt att notera att om du ställer in ett annat blandningsläge än normalgenererar ett nytt staplingskontext som sedan måste blandas med det staplingskontext som innehåller elementet.

Effekten av dessa värden visas i demo nedan:

Mer information

Grunderna i CSS-blandningslägen
mix-blend-mode på MDN
mix-blend-mode på W3C
En samling av CSS Blend Mode-demos
Lär känna CSS Blend Modes

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.