Mix-blend-modus - CSS-trucs | CSS Almanac 2025

De mix-blend-modeeigenschap definieert hoe de inhoud van een element moet versmelten met de achtergrond. De tekst van bijvoorbeeld een

zou op interessante manieren kunnen versmelten met de achtergrond erachter.

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

In het bovenstaande voorbeeld is de inhoud gewijzigd door de mix-blend-modezodat de kleuren van de tekst zijn uitgesloten van de achtergrond. Dit is slechts een van de vele waarden voor deze eigenschap.

Er is een probleem met Chrome 58+ waarbij mix-blend-modeniet wordt weergegeven op elementen die op transparant zijn ingesteld . Het heeft een ticket gekregen als nummer 711955 in Chrome, dat op het moment van schrijven is toegewezen. In de tussentijd is een eenvoudige oplossing om een witte (of eigenlijk elke) achtergrondkleur toe te wijzen aan het body-element.

Waarden

initial: de standaardinstelling van de eigenschap die geen overvloeimodus instelt.
inherit: een element zal de overvloeimodus van het bovenliggende element erven.
unset: verwijdert de huidige mengmodus van een element.
: dit is het kenmerk van een van de onderstaande mengmodi:
normal: dit kenmerk past helemaal geen overvloeiing toe.
multiply: het element wordt vermenigvuldigd met de achtergrond en vervangt de achtergrondkleur. De resulterende kleur is altijd zo donker als de achtergrond.
screen: vermenigvuldigt de achtergrond en de inhoud vult het resultaat aan. Dit resulteert in inhoud die helderder is dan de background-color.
overlay: vermenigvuldigt of screent de inhoud afhankelijk van de achtergrondkleur. Dit is het omgekeerde van de mengmodus voor hard licht.
donkerder: de achtergrond wordt vervangen door de inhoud waar de inhoud donkerder is, anders blijft het zoals het was.
lighten: de achtergrond wordt vervangen door de inhoud waar de inhoud lichter is.
color-dodge: dit kenmerk maakt de achtergrondkleur helderder om de kleur van de inhoud weer te geven.
color-burn: dit maakt de achtergrond donkerder om de natuurlijke kleur van de inhoud weer te geven.
hard-light: afhankelijk van de kleur van de inhoud zal dit attribuut het screenen of vermenigvuldigen.
soft-light: afhankelijk van de kleur van de inhoud wordt deze donkerder of lichter.
difference: dit trekt de donkerste van de twee kleuren af van de lichtste kleur.
exclusion: vergelijkbaar met differencemaar met lager contrast.
hue: creëert een kleur met de tint van de inhoud gecombineerd met de verzadiging en helderheid van de achtergrond.
saturation: creëert een kleur met de verzadiging van de inhoud gecombineerd met de tint en helderheid van de achtergrond.
color: creëert een kleur met de tint en verzadiging van de inhoud en de helderheid van de achtergrond.
luminosity: creëert een kleur met de helderheid van de inhoud en de tint en verzadiging van de achtergrond. Dit is het omgekeerde van het colorattribuut.

Het is vermeldenswaard dat het instellen van een andere overvloeimodus dan normaleen nieuwe stapelcontext zal genereren die vervolgens moet worden gemengd met de stapelcontext die het element bevat.

Het effect van deze waarden wordt getoond in de onderstaande demo:

Meer informatie

Basisprincipes van CSS-mengmodi
mix-blend-mode op MDN
mix-blend-mode op W3C
Een verzameling CSS Blend Mode-demo's
Kennismaken met CSS-mengmodi

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.