Propriété CSS background-blend-mode
background-blend-mode est une propriété CSS qui définit le mélange des images d'arrière-plan entre elles et avec la couleur d'arrière-plan. Elle possède 10 valeurs : normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. La valeur par défaut est normal.
S'il y a plusieurs calques d'arrière-plan et qu'ils ont une liste spécifiée de modes de fusion, background-blend-mode doit être appliqué dans le même ordre que background-image. S'il n'y a pas assez de valeurs pour correspondre au nombre de calques, la liste des valeurs doit être répétée jusqu'à en avoir suffisamment.
La propriété background-blend-mode est utilisée pour mélanger les calques d'arrière-plan.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundBlendMode = "luminosity"; |
Syntaxe
Syntaxe de la propriété CSS background-blend-mode
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;Exemple de la propriété background-blend-mode :
Exemple de la propriété CSS background-blend-mode avec la valeur normal
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: normal;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat
Dans l'exemple suivant, essayez et voyez comment les images d'arrière-plan sont mélangées :
Exemple de la propriété background-blend-mode avec la valeur "screen" :
Exemple de la propriété CSS background-blend-mode avec la valeur screen
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: screen;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Exemple de la propriété background-blend-mode avec la valeur "color-dodge" :
Exemple de la propriété CSS background-blend-mode avec la valeur color-dodge
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: color-dodge;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Exemple de la propriété background-blend-mode avec la valeur "multiply" :
Exemple de la propriété CSS background-blend-mode avec la valeur multiply
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: multiply;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Exemple de la propriété background-blend-mode avec la valeur "overlay" :
Exemple de la propriété background-blend-mode avec la valeur "overlay" :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: overlay;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Exemple de la propriété background-blend-mode avec la valeur "darken" :
Exemple de la propriété background-blend-mode avec la valeur "darken" :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: darken;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Exemple de la propriété background-blend-mode avec la valeur "saturation" :
Exemple de la propriété background-blend-mode avec la valeur "saturation" :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png"), url("https://fr.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: saturation;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| normal | Définit le mode de fusion sur normal. | Essayer » |
| multiply | Définit le mode de fusion sur multiply. | Essayer » |
| screen | Définit le mode de fusion sur screen. | Essayer » |
| overlay | Définit le mode de fusion sur overlay. | Essayer » |
| darken | Définit le mode de fusion sur darken. | Essayer » |
| lighten | Définit le mode de fusion sur lighten. | Essayer » |
| color-dodge | Définit le mode de fusion sur color-dodge. | Essayer » |
| saturation | Définit le mode de fusion sur saturation. | Essayer » |
| color | Définit le mode de fusion sur color. | Essayer » |
| luminosity | Définit le mode de fusion sur luminosity. | Essayer » |
Pratique
Que fait la propriété CSS background-blend-mode ?