Propriété mix-blend-mode

La propriété mix-blend-mode définit le mode de fusion de la couleur source sur la couleur d'arrière-plan ou l'image d'arrière-plan. Les valeurs de la propriété sont analogues aux modes principaux des logiciels graphiques.

Syntaxe

csssélecteur {
  mix-blend-mode: valeurs;
}

Le tableau présente les valeurs principales pour la propriété mix-blend-mode :

Valeurs

Valeur	Description
`normal`	Normal. Aucun mélange de couleurs n'est utilisé. Mode par défaut.
`multiply`	Multiplication. Dans ce mode, la valeur de la couleur principale est multipliée par la valeur de la couleur fusionnée. La couleur résultante est toujours une couleur plus sombre.
`screen`	Écran. Dans ce mode, les valeurs inverses de la couleur principale et de la couleur fusionnée sont multipliées. La couleur résultante est toujours une couleur plus claire.
`overlay`	Superposition. Dans ce mode, les couleurs sont multipliées ou éclaircies en fonction de la couleur principale. Les motifs ou couleurs recouvrent les pixels existants, laissant les zones claires et sombres de la couleur principale inchangées.

Exemple

Voyons comment une image apparaît avec la valeur par défaut de la propriété mix-blend-mode :

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Exemple

Maintenant, changeons le mode de fusion en multiplication :

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Exemple

Définissons la valeur de superposition pour la propriété mix-blend-mode :

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Voir aussi

la propriété background,
qui est une propriété raccourcie pour l'arrière-plan
la propriété background-image,
qui permet de définir une image d'arrière-plan pour un bloc
la propriété background-blend-mode,
qui permet de fusionner une image d'arrière-plan avec une couleur d'arrière-plan