Contrôle la casse du texte
Définition et utilisation da la propriété css backdrop-filter
La propriété backdrop-filter est utilisée pour appliquer un effet graphique à la zone située derrière un élément.Astuce : pour que l'effet soit visible, l'élément ou son arrière-plan doit être au moins partiellement transparent.
La Syntaxe CSSbackdrop-filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | none | initial | inherit
| Valeurs par défaut | None |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.backdropFilter= "grayscale(100%)"; |
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 76 | 17 | 70 | 9 -webkit- | 63 |
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS la propriété backdrop-filter</title>
<style>
.container {
background-image: url("image.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 300px;
width: 360px;
}
.foreground {
backdrop-filter:blur(5px);
color:red;
width:100px;
padding:10px;
}
</style>
</head>
<body>
<h1 style="color: red">
oujood.com
</h1>
<b>CSS | backdrop-filter</b>
<div class="container">
<div class="foreground">
Ce texte n'est pas affecté
par la propriété backdrop-filter.
</div>
</div>
</body>
</html>
Valeurs de la propriété
none Valeur par défaut. Aucun filtre n'est appliqué à la toile de fond filter liste de fonctions de filtrage séparées par un espace, comme :- blur(): Elle est utilisée pour appliquer un flou gaussien à l'image. La valeur par défaut de cette fonction est 0, ce qui n'applique aucun effet de flou.
- brightness() : Il est utilisé pour rendre l'image plus claire ou plus sombre. Une valeur supérieure à 100 % éclaircira l'image et une valeur inférieure l'assombrira. Si la luminosité atteint 0 %, l'image sera complètement noire. Exemple : backdrop-filter: brightness(25%);
- contrast() : Il permet de régler le contraste de l'image. L'image originale est à 100% de contraste. Si le contraste est inférieur à 0 %, l'image sera complètement noire.
Exemple : backdrop-filter: contrast(20%); - drop-shadow() : Il est utilisé pour appliquer un effet d'ombre portée à l'élément. Il accepte les quantités d'ombre horizontale et verticale ainsi que les valeurs d'étalement et de couleur.
Exemple : backdrop-filter: drop-shadow(20px 10px red);
- grayscale() : Il est utilisé pour convertir les couleurs de l'image en noir et blanc. Une valeur de 0% indique l'image originale et 100% indiquera une image complètement noire et blanche.
Exemple : backdrop-filter: grayscale(75%);
- hue-rotate() : Elle est utilisée pour appliquer une rotation de la teinte à l'image. La valeur de la fonction indique le nombre de degrés autour du cercle de couleur que le cercle de l'image serait ajusté. La valeur par défaut est 0, ce qui représente l'image originale.
Exemple : backdrop-filter: hue-rotate(180deg);
- invert() : Il est utilisé pour inverser l'image. La valeur par défaut est 0% qui représente l'image originale et 100% rendra l'image complètement inversée.
Exemple : backdrop-filter: invert(100%);
- opacity() : Il est utilisé pour définir l'opacité de l'image. La valeur par défaut est 0%, ce qui indique que l'image est complètement transparente et une valeur de 100% indique que l'image originale est complètement opaque.
Exemple : backdrop-filter: opacity(50%);
- sepia() : Il est utilisé pour convertir l'image en sépia en lui donnant un aspect plus chaud. Une valeur de 0% représente l'image originale et 100% représente une image complètement sépia.
Exemple : backdrop-filter: sepia(100%);
- saturate() : Il est utilisé pour définir la saturation de l'élément. La valeur par défaut est de 100 %, ce qui indique l'image originale. Une valeur de 0 % indique une image complètement non saturée et une valeur supérieure à 100 % indique une image super-saturée.
Exemple : backdrop-filter: saturate(50%);
- ou une url vers un filtre SVG qui sera appliqué à l'arrière-plan
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son parent.