Propriété CSS mix-blend-modeProperty
Exemple
Définissez l'élément image pour qu'il se mélange avec l'arrière-plan du conteneur parent (jaune), et l'image deviendra plus sombre :
.container {
background-color: yellow;
padding: 15px;
}
.container img {
mix-blend-mode: darken;
}
Essayez-le vous-même »
Définition de la balise et instructions d'utilisation
La propriété mix-blend-mode décrit comment le contenu d'un élément doit se mélanger avec le contenu du parent direct de l'élément et l'arrière-plan de l'élément.
| Valeur par défaut : | normal |
|---|---|
| Héritée : | Aucun. |
| animation: | Aucun.À proposAnimations CSS |
| Syntaxe JavaScript : | object.style.mixBlendMode = "darken" Essayez-le vous-même » |
Prise en charge des navigateurs
Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | 79.0 | 32.0 | 8.0 | 35.0 |
Syntaxe
mix-blend-mod: <blend-mode>La valeur <blend-mode> peut être l’une des suivantes :
mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity;
Plusieurs valeurs peuvent être séparées par des virgules.
Exemple
Divers exemples de modes de fusion :
.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}
Essayez-le vous-même »