background-blend-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La propriété CSS background-blend-mode définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.

Exemple interactif

Les modes de fusions (blending modes) doivent être définis dans le même ordre que les images sont définies avec background-image. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.

Syntaxe

css
/* Une valeur qui s'applique à toutes les images */
background-blend-mode: normal;

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

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

Valeurs

<blend-mode>

Une valeur décrivant un mode de fusion (type <blend-mode>) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.

Définition formelle

Valeur initialenormal
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éenon
Valeur calculéecomme spécifié
Type d'animationNot animatable

Syntaxe formelle

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

Exemples

CSS

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

HTML

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>

JavaScript

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

Résultat

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi