mix-blend-mode - Propriété CSS
Résumé des caractéristiques de la propriété mix-blend-mode
normal
| multiply
| screen
| overlay
| difference
| exclusion
| darken
| lighten
| color-dodge
| color-burn
| hard-light
| soft-light
| hue
| saturation
| color
| luminosity
| plus-lighter
normal
mix-blend-mode
ne peut pas être animée.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.
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; ⚠
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
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.
mix-blend-mode
.
plus-lighter
.
mix-blend-mode
plus-lighter
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.