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
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilementoui

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mix-blend-modeChrome Support complet 41Edge Aucun support NonFirefox Support complet 32IE Aucun support NonOpera Support complet 28Safari Support complet 8WebView Android Support complet 41Chrome Android Support complet 41Firefox Android Support complet 32Opera Android Support complet 28Safari iOS Support complet 8Samsung Internet Android Support complet 4.0
On SVG elementsChrome Support complet 41Edge Aucun support NonFirefox Support complet 32IE Aucun support NonOpera Support complet 28Safari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 32Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi