Propriété CSS mix-blend-mode
La propriété mix-blend-mode définit le mélange du contenu de l’élément avec l’arrière-plan de son parent direct. Vous devez disposer d’une background-image, d’une background-color ou d’une <img> pour effectuer le mélange.
En CSS, 16 modes de fusion sont disponibles. Si une valeur autre que « normal » (valeur par défaut) est définie sur un élément, un nouveau contexte d’empilement sera créé sur cet élément. Le groupe nouvellement formé doit alors être mélangé avec le contexte d’empilement qui contient l’élément. L’élément ne se mélangera pas avec le contenu situé en dehors du contexte d’empilement.
Toute propriété qui provoque la création d’un contexte d’empilement peut avoir un impact sur le mélange.
Vous pouvez utiliser la propriété isolation pour isoler un élément.
TIP
Si vous souhaitez mélanger les images d’arrière-plan d’un élément entre elles, vous pouvez utiliser la propriété background-blend-mode.
| Initial Value | normal |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.mixBlendMode = "exclusion"; |
Syntaxe
Syntaxe de la propriété CSS mix-blend-mode
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;Exemple de la propriété mix-blend-mode :
Exemple de la propriété CSS mix-blend-mode avec la valeur multiply
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: multiply</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Exemple de la propriété mix-blend-mode avec la valeur "screen" :
Exemple de la propriété CSS mix-blend-mode avec la valeur screen
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: screen</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Exemple de la propriété mix-blend-mode avec la valeur "color-dodge" :
Exemple de la propriété CSS mix-blend-mode avec la valeur color-dodge
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: color-dodge;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: color-dodge</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Exemple de la propriété mix-blend-mode avec la valeur "hue" :
Exemple de la propriété CSS mix-blend-mode avec la valeur hue
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: hue;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: hue</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Exemple de la propriété mix-blend-mode avec la valeur "normal" :
Propriété CSS mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 500px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: normal;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: normal</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Exemple de la propriété mix-blend-mode avec la valeur "hard-light" :
Propriété CSS mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 400px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: hard-light;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: hard-light</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Exemple de la propriété mix-blend-mode avec la valeur "difference" :
Propriété CSS mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 400px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: difference</h3>
<div class="example">
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Valeurs
| Value | Description |
|---|---|
| normal | Définit le mode de fusion sur normal. C’est la valeur par défaut de cette propriété. |
| multiply | Définit le mode de fusion sur multiply. |
| screen | Définit le mode de fusion sur screen. |
| overlay | Définit le mode de fusion sur overlay. |
| darken | Définit le mode de fusion sur darken. |
| lighten | Définit le mode de fusion sur lighten. |
| color-dodge | Définit le mode de fusion sur color-dodge. |
| color-burn | Définit le mode de fusion sur color-burn. |
| exclusion | Définit le mode de fusion sur exclusion. |
| difference | Définit le mode de fusion sur difference. |
| hue | Définit le mode de fusion sur hue. |
| saturation | Définit le mode de fusion sur saturation. |
| color | Définit le mode de fusion sur color. |
| luminosity | Définit le mode de fusion sur luminosity. |
| initial | Fait en sorte que la propriété utilise sa valeur par défaut. |
| inherit | Hérite la propriété de l’élément parent. |
Practice
Which of the following browser versions do not support the CSS mix-blend-mode property?