backdrop-filter - Propriété CSS
Résumé des caractéristiques de la propriété backdrop-filter
Plusieurs filtres peuvent être énumérés.
none
none
backdrop-filter
passe progressivement d'une valeur à une autre.Quel est le rôle de la propriété CSS backdrop-filter
?
La propriété 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
.
hue-rotate()
derrière ce deuxième bloc.
Syntaxes pour backdrop-filter
.
function()
est une fonction de filtre graphique, comme blur()
, contrast()
, etc.
url
est une adresse vers un fichier, le plus souvent, SVG définissant un filtre graphique.
Plusieurs fonctions ou plusieurs URL peuvent être citées, séparées par des espaces.
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 peut être utilisé avec
backdrop-filter
. Cliquez sur les noms des fonctions pour plus de précision sur leur effet ou leur paramétrage.Dans l'exemple ci-dessous, la couleur du texte est proche de celle du dégradé en arrière-plan, rendant le texte illisible. Vous pourrez constater la présence d'une première ligne de texte en la sélectionnant.
En réduisant la luminosité de l'arrière-plan sur la deuxième ligne, on améliore beaucoup la lisibilité.Texte illisible car dans une couleur proche de celle de l'arrière-planAmélioration de la lisibilité avecbackdrop-filter:brightness(0.5);
- backdrop-filter:
url()
;Applique les traitements graphiques définis dans le fichier indiqué (en format SVG).
L'exemple ci-dessous applique un flou défini en SVG a=à la deuxième ligne de texte afin d'améliorer la lisibilité.
⚠ Cet exemple ne marche pas sur (2024).Texte à peine lisible à cause d'un arrière-plan trop contrastéAmélioration de la lisibilité avec un filtre SVGbackdrop-filter:url('#blur');
-
Une série de valeurs, séparées par des espaces : application d'une succession de filtres.
- backdrop-filter:
initial
; backdrop-filter:inherit
; backdrop-filter:revert
; backdrop-filter:revert-layer
; backdrop-filter:unset
;La valeur initiale est :
.none
Animation de la propriété backdrop-filter
.
La propriété backdrop-filter
peut être animée grâce aux fonctions graphiques auxquelles elle fait appel.
En effet ces fonctions acceptent toutes une ou plusieurs valeurs numériques en paramètre.
backdrop-filter
Manipulation de la propriété backdrop-filter
par programme.
Dans les exemples de code qui suivent, le paramètre el
représente l'assemblage ci-dessous, composé d'un élément avec un arrière-plan
fortement texturé, et un élément avec un fond transparent. Le texte de ce deuxième élément est donc difficilement lisible.
Modifier la valeur de backdrop-filter
en Javascript.
En Javascript, voici comment modifier la valeur de backdrop-filter
.
On voit que Javascript accepte une syntaxe avec la notation typique de css, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case
(une majuscule pour séparer les mots).
function setBackdropFilter(el) {
el.style['backdrop-filter']='blur(10px)';
// ou
el.style.backdropFilter='blur(10px)';
}
Lire en Javascript la valeur de backdrop-filter
.
Pour que le code ci-dessous fonctionne, la propriété doit avoir été affectée directement à l'élément lui-même en HTML, via l'attribut
style
, et non pas en passant par un sélecteur CSS.
function getBackdropFilter(el) {
alert(el.style['backdrop-filter']);
// ou
alert(el.style.backdropFilter);
}
Lire la valeur calculée de backdrop-filter
en Javascript.
La valeur calculée est toujours définie. Elle résulte de la cascade d'héritage, et si aucune valeur n'est définie pour cette propriété,
la valeur calculée sera la valeur initiale de la propriété (none
).
function getCalcBackdropFilter(el) {
alert(window.getComputedStyle(el).getPropertyValue('backdrop-filter'));
}
Modifier la valeur de la propriété backdrop-filter
avec JQuery.
Comme en Javascript, le nom de la propriété peut être écrit en kebab-case
ou en camel-case
.
function setBackdropFilter(el) {
$(el).css('backdrop-filter','contrast(0.2)');
// ou
$(el).css('backdropFilter','contrast(0.2)');
}
Lire la valeur calculée de la propriété backdrop-filter
avec JQuery.
function getCalcBackdropFilter(el) {
alert($(el).css('backdrop-filter'));
// ou
alert($(el).css('backdropFilter'));
}
Simulateur.
La propriété backdrop-filter permet d'arranger les choses.
Prise en charge de backdrop-filter par les navigateurs.
La propriété backdrop-filter
est maintenant reconnue par la plupart des navigateurs récents.
backdrop-filter
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que backdrop-filter
.
Les spécifications CSS éditées par le W3C sont organisées en modules. backdrop-filter
fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.