Mix-blend-mode - Propriété CSS

Description de la propriété mix-blend-mode..

mix-blend-mode définit comment sont mélangées le contenu d'un élément et ce qui est en arrière-plan de cet élément, c'est à dire l'arrière-plan de son ou ses parents.

Par défaut l'arrière-plan n'est visible que à travers les parties transparentes du contenu. Dans l'exemple ci-dessous, une image (la tranche de fromage) est insérée dans un élément comportant un fond de couleur. Ce dernier n'est visible que autour de l'image ou à travers les parties transparentes de l'image (les trous dans le fromage).
Sur la deuxième image mix-blend-mode permet de définir comment doivent interagir arrière-plan et premier plan.

Par défaut, l'arrière-plan n'est visible que aux endroits où le premier plan est transparent.

Ici l'arrière-plan et le premier plan interagissent entre eux suivant le mode défini par mix-blend-mode.

Le mélange ne peut se faire que entre des éléments qui sont dans le même contexte d'empilement. Deux propriétés peuvent créer un nouveau contexte d'empilement, et donc empêcher le mélange avec des éléments situés en dessous : ce sont opacity avec une valeur différente de 1, et isolation avec la valeur isolate.

On retrouve un principe identique au mélange de calques dans Photoshop. Vous trouverez plus de détails sur les modes de fusion sur la page Les modes de fusion.

Valeurs pour mix-blend-mode.

• mix-blend-mode: normal;

  Le contenu masque l'arrière-plan, sauf dans ses parties transparentes.

• mix-blend-mode: lighten; mix-blend-mode: darken; mix-blend-mode: multiply; mix-blend-mode: difference; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: color; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: luminosity; mix-blend-mode: plus-lighter; ⚠ mix-blend-mode: plus-darker; ⚠

  Reportez-vous à la page sur Les modes de fusion pour des explications détaillées sur les différents modes de fusion.

• mix-blend-mode: initial; (normal) mix-blend-mode: inherit; mix-blend-mode: revert; mix-blend-mode: revertLayer; mix-blend-mode: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de mix-blend-mode.

La propriété mix-blend-mode peut être animée de façon discontinue (passage brutal d'une valeur une autre). Voici un exemple faisant intervenir deux dégradés, un linéaire sur l'élément parent, et un radial sur l'enfant. Le mélange des deux dégradés se fait par la propriété mix-blend-mode.

Exemple interactif avec la propriété mix-blend-mode.

Le simulateur modifie la propriété mix-blend-mode d'un élément dont le parent possède les trois couleurs de base (rouge vert et bleu) en arrière-plan. Observez comment la couleur des textes interagit avec ces couleurs suivant le mode de fusion choisi.

Un autre simulateur est disponible sur la page Les modes de fusion

Compatibilité des navigateurs avec mix-blend-mode.

Mis à part l'ancien navigateur Internet Explorer, tous les navigateurs actuels traient bien la propriété mix-blend-mode.
La valeur plus-lighter, définie plus récemment, pose encore quelques problèmes en particulier avec Opéra.

1

Modes de
fusion

2

Propriété
mix-blend-mode

3

Valeur
plus-darker

4

Sur des
éléments SVG

Estimation de la prise en charge globale.

96%

95%

17%

28%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Samsung Internet

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété mix-blend-mode.

• Compositions et mélanges - Niveau 1

  Première définition de la prporiété mix-blend-mode.
  

  16 Août 2012

  Document de travail.

  

  20 Février 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des mélanges.

Pour davantage de précisions sur les différents types de mélange, reportez vous à la page Les modes de fusion.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété mix-blend-mode fait partie du module Compositing and Blending. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :