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 :

CSS - Propriété mix-blend-mode

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. mix-blend-mode permet de définir un mélange entre arrière-plan et contenu.

On retrouve un principe identique au mélange de calques dans Photoshop.

Valeurs pour mix-blend-mode.

  • mix-blend-mode: normal;

    Valeur par défaut. Le contenu masque la fond, 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;

    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;

    La valeur initiale est normal.

  • mix-blend-mode: unset; mix-blend-mode: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur modifie la propriété mix-blend-mode d'un élément dont le parent possède l'arc-en ciel en image d'arrière-plan. Observez comment la couleur des textes interagit avec l'arc-en-ciel suivant le mode de fusion choisi.

Un autre simulateur est disponible sur la page décrivant les modes de fusion.

mix-blend-mode :
Noir Blanc Rouge Vert Bleu

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.