La propriété CSS background-blend-mode

Définition et utilisation

La propriété background-blend-mode définit le mode de fusion et le mélange de chaque calque d'arrière-plan (couleur ou image).

Valeur par défaut :	normal
Héritée :	non
Animer :	Lire à propos des propriétés css animables(animatable)
Version:	CSS3
Syntaxe JavaScript :	object. style.backgroundBlendMode="screen"

Appui des navigateurs de la propriété background-blend-mode

Les nombres dans le tableau spécifient la version à partir du quelle le navigateur prend totalement en charge la propriété background-blend-mode.

Propriété \| Navigateur
background-blend-mode	35	79	30	7.1	22

Syntaxe CSS de la propriété background-blend-mode.

Valeurs de la propriété background-blend-mode

Valeur	Description
normal	C’est la valeur par défaut. Définit le mode de fusion normale
multiply	Définit le mode de fusion à multiplier
screen	Définit le mode de fusion à l'écran
overlay	Définit le mode de fusion de superposer
darken	Définit le mode de fusion pour assombrir
lighten	Définit le mode de fusion à alléger
color-dodge	Définit le mode de fusion de couleur Dodge
saturation	Définit le mode de fusion de la saturation
color	Définit le mode de fusion à la couleur
luminosity	Définit le mode de fusion à la luminosité

Exemple

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title>Exemple: la propriété background-blend-mode </title>
<style>
div {
  width: 300px;
  height: 300px;
  background-size: 300px 300px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to left, black 0%,white 100%),
url('https://www.oujood.com/images/logo.png');
  background-blend-mode: multiply;
}
p{font-size: 1.5em;  }
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> Internet Explorer ne prend pas en
charge la propriété background-blend-mode.</p>
</body>
</html>

Pour voir les différents effets tester l’exemple avec les différentes valeurs de la propriété background-blend-mode.

Exemple 2 : enchaînement de plusieurs modes de fusion.

Chaque couche de fond ne peut avoir seulement un mode de mélange unique, cependant, si nous utilisons des dégradés linéaires multiples, par exemple, chacun d'eux peut avoir son propre mode de fusion qui permet un affichage intéressant.

Ce résultat est obtenu en énumérant ces valeurs dans l'ordre de la couche de fond que vous souhaiteriez

En voici un exemple :

Sélectionner le code


	<!DOCTYPE html>
	<html>
	<head>
		<title>Exemple: la propriété background-blend-mode avec plusieurs
		couches</title>
		<style>
		div {
		  width: 300px;
		  height: 300px;
		  background-size: 300px 300px;
		  background: linear-gradient(purple 0%, red 90%), linear-gradient(to
		right, purple 0%, yellow 90%),
		url('https://www.oujood.com/images/logo.png'); background-blend-mode:
		screen, saturation, lighten;
		}
		p{
		   font-size: 1.5em;
		}
		</style>
	</head>
	<body>
		<div></div>
		<p><b>Note:</b> Internet Explorer ne supporte pas la
		propriété background-blend-mode.</p>
	</body>
	</html>

Liste des propriétés css

Par Gerywa 11 Janvier 2016