La backdrop-filterpropriété de CSS est utilisé pour appliquer des effets de filtre ( grayscale, contrast, blur, etc.) à l'arrière - plan / arrière - plan d'un élément. Le backdrop-filtera le même effet que la filterpropriété, sauf que les effets de filtre sont appliqués uniquement à l'arrière-plan et non au contenu de l'élément.
Exemple classique:
Arrière-plans filtrés sans filtre de fond
Auparavant backdrop-filter, la seule façon d'ajouter un arrière-plan filtré était d'ajouter un élément «arrière-plan» séparé, de le positionner derrière le ou les éléments de premier plan et de le filtrer comme suit:
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )La backdrop-filterpropriété vous permet d'éliminer cet élément supplémentaire «d'arrière-plan» et d'appliquer des filtres directement à l'arrière-plan:
.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */Au moment de la rédaction de cet article, backdrop-filterfait partie du brouillon de l'éditeur du module Filter Effects 2 et ne fait officiellement partie d'aucune spécification. La prise en charge des navigateurs est actuellement limitée (voir «Prise en charge des navigateurs» ci-dessous).
Syntaxe
.element ( backdrop-filter: ()* | none ) peut être l'un des suivants:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- (pour appliquer des filtres SVG)
Vous pouvez appliquer plusieurs s à une toile de fond, comme ceci:
.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )Voir le brouillon de travail du module d'effets de filtre du W3C pour les valeurs acceptables pour chacune des fonctions de filtre.
Exemple
Pour un aperçu complet des fonctions de filtrage et des façons astucieuses de les utiliser ensemble, consultez l' filterentrée d'almanach sur CSS-Tricks.
Le stylo suivant est tiré d'un exemple de l'article explorant de Robin Rendle backdrop-filter.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 76 | Non | Non | 17 | 9 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | Non | 81 | 9,0 à 9,2 * |
En rapport
filter
Ressources
- La propriété backdrop-filter par Robin Rendle
- Entrée MDN sur backdrop-filter