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é background-blend-mode

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

background-blend-mode définit comment sont mélangées les images d'arrière-plan et la couleur d'arrière-plan. Par défaut les images du dessous, ainsi que la couleur ne sont visibles que à travers les parties transparentes des images supérieures. Mais background-blend-mode change ce mode de fonctionnement. On retrouve un principe identique au mélange de calques dans Photoshop.

background:url('chemin/image1'), url('chemin/image2'), silver; └──────────────────┘ └──────────────────┘ └─────┘ image au dessus image en dessous couleur

La propriété background-blend-mode est sans effet si l'arrière-plan est composé d'une seule image ou seulement d'une couleur.

Reportez-vous à la page généralités sur les arrière-plans pour des explications générales sur l'arrière-plan en CSS, et à la page arrière-plans multiples pour la gestion des arrière-plans multiples.

Syntaxes pour background-blend-mode.

  • background-blend-mode: normal;

    Valeur par défaut. L'image du dessus masque les autres images et la couleur d'arrière-plan, sauf dans ses parties transparentes.

  • background-blend-mode: lighten; background-blend-mode: darken; background-blend-mode: multiply; Etc.

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

  • background-blend-mode: multiply, screen, luminosity, ...;

    Cette syntaxe, comportant plusieurs valeurs séparées par des virgules, est utilisable lorsque plusieurs arrière-plan ont été définis. Voir arrière-plans multiples.

  • background-blend-mode: initial;

    La valeur initiale est normal.

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

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

Simulateur.

Le simulateur utilise un arrière-plan composé des deux images ci-dessous et d'un dégradé de couleurs, depuis le blanc jusqu'au gris (silver). Observez comment background-blend-mode fait interagir ces différentes arrière-plans.

Première image d'exemple pour background-blend-mode

Deuxième image d'exemple pour background-blend-mode
background-blend-mode :

Compatibilité et prise en charge de background-blend-mode.

Afficher les versions antérieures   Afficher la version à venir  

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.
  • 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.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

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.