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é backdrop-filter

Description de la propriété backdrop-filter.

backdrop-filter définit un filtre graphique (flou, ombrage, etc) qui sera appliqué sur l'élément situé derrière l'élément désigné par le sélecteur. Pour que l'effet soit visible, ce dernier doit bien entendu avoir un arrière-plan transparent ou au moins avec une opacité inférieure à 1.

Voici par exemple ce qu'il est possible d'obtenir avec backdrop-filter.

Afin de rendre la lecture du texte plus facile, le fond de l'élément en arrière-plan a été éclairci.
La couleur de l'élément en arrière-plan a été changée (rotation de couleur avec le fonction hue-rotate() derrière ce deuxième bloc.
Le contraste de l'élément en arrière plan a été réduit afin de faciliter la lecture du texte.

Syntaxes pour backdrop-filter.

  • backdrop-filter: none;

    Valeur par défaut. Aucun effet graphique n'est appliqué.

  • backdrop-filter: blur();
    backdrop-filter: brightness();
    backdrop-filter: contrast();
    backdrop-filter: drop-shadow();
    backdrop-filter: grayscale();
    backdrop-filter: hue-rotate();
    backdrop-filter: invert();
    backdrop-filter: opacity();
    backdrop-filter: sepia();
    backdrop-filter: saturate();

    Toutes ces fonctions appliquent un filtre graphique (contraste, changement des couleurs, etc.) qui peuvent être utilisés avec backdrop-filter. Cliquez sur les noms des fonctions pour plus de précision sur leur effet ou leur paramétrage.

  • backdrop-filter: url();

    Applique les traitements graphiques définis dans le fichier indiqué (en format svg).

  • backdrop-filter: blur() sepia() opacity();

    Une série de valeurs, séparées par des espaces : application d'une succession de filtres.

  • backdrop-filter: inherit | initial | unset;

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

Simulateur.

backdrop-filter :
Ce texte risque d'être difficile à lire à cause du fond très chargé de l'élément parent.
La propriété backdrop-filter permet d'arranger les choses.

Prise en charge de backdrop-filter par les navigateurs.

La propriété backdrop-filter n'est pas encore suffisamment standardisée : de grosses différences de rendu sont constatées d'un navigateur à l'autre.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Images et filtres - Propriétés.

  • 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.
  • 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.