Propriété background-blend-mode

La propriété background-blend-mode définit le mode de fusion de l'image de fond avec la couleur de fond ou d'autres images. Dans cette propriété, on peut également spécifier plusieurs valeurs séparées par des virgules, qui seront appliquées dans le même ordre. Les valeurs pour la propriété sont analogues aux modes principaux des logiciels graphiques.

Syntaxe

sélecteur {
	background-blend-mode: modes;
}

Le tableau présente les valeurs principales pour la propriété background-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 de base est multipliée par la valeur de la couleur de fusion. La couleur résultante est toujours une couleur plus sombre.
`screen`	Écran. Dans ce mode, les valeurs inverses de la couleur de base et de la couleur de fusion 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 de base. Les motifs ou les couleurs recouvrent les pixels existants, en laissant inchangées les parties claires et sombres de la couleur de base.

Exemple

Voyons à quoi ressemble une image avec la valeur par défaut de la propriété background-blend-mode :

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Maintenant, changeons la valeur de la propriété background-blend-mode en multiplication :

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Définissons le mode écran pour notre image :

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voir aussi

la propriété background,
qui est une propriété raccourcie pour le fond
la propriété background-image,
qui permet de définir une image de fond pour un bloc
la propriété mix-blend-mode,
qui permet de fusionner les couleurs d'origine avec l'image de fond
la propriété backdrop-filter,
qui permet d'appliquer des filtres