Propriété backdrop-filter CSS

Définition et utilisation

backdrop-filter L'attribut est utilisé pour appliquer des effets graphiques à la zone derrière l'élément.

Conseil :Pour voir l'effet, l'élément ou son arrière-plan doit être au moins partiellement transparent.

Ajouter des effets graphiques à la zone derrière l'élément :

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

backdrop-filter: none|filter|initial|inherit;

Valeur	Description
none	Valeur par défaut. Ne pas appliquer de filtre sur le fond.
filter	Liste des fonctions de filtre séparées par des espaces, par exemple : blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() ou vers l'URL du filtre SVG.
initial	Définit cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this attribute from its parent element. Voir inherit.

Valeur par défaut :	none
Héritabilité :	Non
Réalisation des animations :	Prise en charge. Voir :Attributs associés aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.backdropFilter="grayscale(100%)"

Les nombres dans le tableau représentent la version initiale de prise en charge complète de l'attribut par le navigateur.

Les nombres avec le préfixe -webkit- représentent la version initiale de prise en charge de ce préfixe.

Chrome	Edge	Firefox	Safari	Opera
76	79	103	9 -webkit-	63