mix-blend-mode

La propriété mix-blend-mode définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.

Syntaxe

/* Valeurs de type <blend-mode> */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

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

Valeurs

<blend-mode>
Indique comment la fusion des modes doit intervenir (cf. <blend-mode>).

Syntaxe formelle

<blend-mode>


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

Exemples

Exemple avec SVG

SVG

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

CSS

circle {
  mix-blend-mode: screen;
}

Résultat

Exemple avec HTML

HTML

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>

CSS

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}

Résultat

Spécifications

Spécification État Commentaires
Compositing and Blending Level 1
La définition de 'mix-blend-mode' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initialenormal
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète
Crée un contexte d'empilementoui

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi