background-blend-mode

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

La propriété CSS background-blend-mode définit comment les images d'arrière-plan d'un élément doivent se fondre entre elles et avec la couleur d'arrière-plan de l'élément.

Les modes de fusion doivent être définis dans le même ordre que la propriété background-image. Si la longueur des listes de modes de fusion et d'images d'arrière-plan n'est pas identique, la liste sera répétée et/ou tronquée jusqu'à ce que les longueurs correspondent.

Exemple interactif

background-blend-mode: normal;

background-blend-mode: multiply;

background-blend-mode: hard-light;

background-blend-mode: difference;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
  </div>
</section>

#example-element {
  background-color: green;
  background-image: url("/shared-assets/images/examples/balloon.jpg");
  width: 250px;
  height: 305px;
}

Syntaxe

css

/* Une valeur */
background-blend-mode: normal;

/* Deux valeurs, chacune pour une image */
background-blend-mode: darken, luminosity;

/* Valeurs globales */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

Valeurs

<blend-mode>: Le mode de fusion à appliquer. Il peut y avoir plusieurs valeurs, séparées par des virgules.

Définition formelle

Valeur initiale	`normal`
Applicabilité	Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques.. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	Not animatable

Syntaxe formelle

background-blend-mode = 
  <'mix-blend-mode'>#  

<mix-blend-mode> = 
  <blend-mode>  |
  plus-lighter  

<blend-mode> = 
  normal       |
  darken       |
  multiply     |
  color-burn   |
  lighten      |
  screen       |
  color-dodge  |
  overlay      |
  soft-light   |
  hard-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

Exemples

Exemple simple

css

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

Essayer différents modes de fusion

html

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));

Spécifications

Specification
Compositing and Blending Module Level 2 # background-blend-mode

Compatibilité des navigateurs

Voir aussi

Le type de donnée <blend-mode>
La propriété mix-blend-mode

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 29 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content