Mix-blend-mode - Astuces CSS | CSS Almanach 2025

La mix-blend-modepropriété définit comment le contenu d'un élément doit se fondre dans son arrière-plan. Par exemple, le texte d'un

pourrait se fondre dans l'arrière-plan de manière intéressante.

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

Dans l'exemple ci-dessus, le contenu a été modifié par le mix-blend-modeafin que les couleurs du texte soient exclues de son arrière-plan. Il ne s'agit que de l'une des nombreuses valeurs de cette propriété.

Il y a un problème avec Chrome 58+ mix-blend-modequi ne rendra pas les éléments définis sur un transparent . Le a été signalé comme numéro 711955 dans Chrome, qui est attribué au moment de la rédaction de cet article. En attendant, une solution simple consiste à attribuer une couleur d'arrière-plan blanche (ou vraiment, n'importe quelle) à l'élément body.

Valeurs

initial: le paramètre par défaut de la propriété qui ne définit pas de mode de fusion.
inherit: un élément héritera du mode de fusion de son élément parent.
unset: supprime le mode de fusion actuel d'un élément.
: c'est l'attribut de l'un des modes de fusion ci-dessous:
normal: cet attribut n'applique aucun mélange.
multiply: l'élément est multiplié par l'arrière-plan et remplace la couleur d'arrière-plan. La couleur résultante est toujours aussi sombre que l'arrière-plan.
screen: multiplie le fond et le contenu complète alors le résultat. Cela se traduira par un contenu plus clair que le background-color.
overlay: multiplie ou filtre le contenu en fonction de la couleur de fond. C'est l'inverse du mode de fusion à lumière dure.
assombrir: l'arrière-plan est remplacé par le contenu où le contenu est plus sombre, sinon, il est laissé tel quel.
lighten: l'arrière-plan est remplacé par le contenu dont le contenu est plus clair.
color-dodge: cet attribut éclaircit la couleur d'arrière-plan pour refléter la couleur du contenu.
color-burn: cela assombrit l'arrière-plan pour refléter la couleur naturelle du contenu.
hard-light: selon la couleur du contenu cet attribut le filtrera ou le multipliera.
soft-light: selon la couleur du contenu, cela l'assombrira ou l'éclaircira.
difference: ceci soustrait la plus foncée des deux couleurs de la couleur la plus claire.
exclusion: similaire differencemais avec un contraste plus faible.
hue: crée une couleur avec la teinte du contenu combinée avec la saturation et la luminosité de l'arrière-plan.
saturation: crée une couleur avec la saturation du contenu combinée avec la teinte et la luminosité de l'arrière-plan.
color: crée une couleur avec la teinte et la saturation du contenu et la luminosité de l'arrière-plan.
luminosity: crée une couleur avec la luminosité du contenu et la teinte et la saturation de l'arrière-plan. C'est l'inverse de l' colorattribut.

Il convient de noter que la définition d'un mode de fusion autre que normalgénérera un nouveau contexte d'empilement qui doit ensuite être fusionné avec le contexte d'empilement qui contient l'élément.

L'effet de ces valeurs est illustré dans la démo ci-dessous:

Plus d'information

Bases des modes de fusion CSS
mix-blend-mode sur MDN
mix-blend-mode sur W3C
Une collection de démos CSS Blend Mode
Se familiariser avec les modes de fusion CSS

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.