oujood.com

Appliquer des effets à l'arrière-plan des éléments : propriété CSS backdrop-filter

La propriété CSS backdrop-filter est utilisée pour appliquer des effets à la zone située derrière un élément.
Contrairement à la propriété filter, qui applique l'effet à l'ensemble de l'élément. Elle peut être utilisée pour éliminer l'utilisation d'un élément supplémentaire pour styliser l'arrière-plan séparément.

chercher |

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 CSS
backdrop-filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | none | initial | inherit
Valeurs par défautNone
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion7617709 -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.

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web