Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

mix-blend-mode - Propriété CSS

mix-blend-mode

Résumé des caractéristiques de la propriété mix-blend-mode

Description rapide
Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.
Statut
Standard
Valeurs prédéfinies
normal | multiply | screen | overlay | difference | exclusion | darken | lighten | color-dodge | color-burn | hard-light | soft-light | hue | saturation | color | luminosity | plus-lighter
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété mix-blend-mode ne peut pas être animée.
Module W3C
Compositions et mélanges
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

Description.

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.

Exemple de mélange entre 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.
Exemple de mélange entre arrière-plan et premier plan

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;

    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; mix-blend-mode: inherit; mix-blend-mode: revert; mix-blend-mode: revert-layer; mix-blend-mode: unset;

    La valeur initiale est : normal.

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

La propriété mix-blend-mode ne peut pas être animée, sans doute à cause de la complexité des calculs qui seraient nécessaires.

Simulateur pour 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

mix-blend-mode :
Noir Blanc Rouge Vert Bleu
Noir Blanc Rouge Vert Bleu
Noir Blanc Rouge Vert Bleu

Prise en charge de la propriété mix-blend-mode (compatibilité).

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.

Colonne 1
Prise en charge de la syntaxe générale de la propriété mix-blend-mode.
Colonne 2
Traitement de la valeur plus-lighter.
1
mix-blend-mode
2
plus-lighter
Estimation de la prise en charge en pourcentage du parc actuel.
94%
90%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que mix-blend-mode.

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

Propriétés.

Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
Gère l'interaction entre les couches.