Comment brouiller une image d'arrière-plan dans CSS

Dans les applications Web, l'utilisation d'images d'arrière-plan est une grande approche pour créer une page Web esthétiquement solide. Parfois, il est nécessaire de brouiller l'image d'arrière-plan pour se concentrer sur le contenu de la page. De plus, il rend une page Web différente des milliers d'autres pages Web. CSS propose de nombreuses fonctions pour manipuler l'image d'arrière-plan.

Ce guide couvrira comment brouiller une image d'arrière-plan dans CSS.

Comment brouiller une image d'arrière-plan dans CSS?

Pour rendre l'image d'arrière-plan floue en un rien de temps, nous utiliserons la propriété CSS «filtre». L'utilisation de la propriété Filtre nous aidera à brouiller efficacement les images.

Alors, sautons dans les détails.

Qu'est-ce que la propriété filtrante dans CSS?

Dans CSS, pour placer certains effets graphiques sur les éléments HTML, «filtre»La propriété est utilisée. Par exemple, si vous souhaitez placer certains effets sur une image, comme un flou ou un contraste, vous pouvez utiliser la propriété Filtre.

Syntaxe:

Filtre: blur () | luminosité () | Hue-Rotate () | contraste () | opacité () | Grayscale () | invert () | drop-shadow () | saturer () | sépia () | URL () | aucun

Comme la propriété filtrante a beaucoup de valeurs et si nous élaborons quelques-uns comme la luminosité () rend les éléments brillants ou sombres, l'opacité () joue avec la transparence, Blur () rend les éléments HTML flou.

Alors, allons de l'avant et comprenons profondément avec un exemple que pouvons-nous rendre l'image d'arrière-plan flou dans CSS.

Exemple

Voici une image d'arrière-plan sur notre page Web, rendons-le flou.

Dans le fichier HTML, prenez un ««Élément à l'intérieur du«" étiqueter.

Html

Maintenant, passons au code CSS:

• Spécifie le "arrière-plan«Propriété avec la valeur»URL" et "sans répétition". Cela définira l'image d'arrière-plan non répétée.
• Allouer un espace approprié à l'image en utilisant «rembourrage«Propriété avec une valeur»25%".
• Dans la prochaine étape, nous attribuerons «filtre«Propriété une valeur«Blur (9px)«Pour rendre l'image floue. La valeur à l'intérieur du flou (), «9px"Permet de contrôler combien nous voulons brouiller l'image sélectionnée comme si nous augmentons la valeur à 10px, cela rendra l'image. D'un autre côté, si nous diminuons la valeur à 6 ou 7px, cela rendra l'image moins floue. De plus, nous pouvons utiliser l'unité "remorqueur"Au lieu de PX.

CSS

div
Contexte: URL (arbres.jpg) sans répétition;
rembourrage: 25%;
Filtre: Blur (9px);

Enfin, enregistrez votre code et ouvrez-le dans votre navigateur pour vérifier le travail.

Nous avons expliqué comment brouiller facilement une image d'arrière-plan dans CSS.

Conclusion

Pour rendre l'image d'arrière-plan flou, utilisez le CSS "filtre«Propriété avec la valeur»se brouiller()". Le flou de valeur peut être modifié pour contrôler la fréquence floue d'une image spécifiée. Vous pouvez définir la valeur en PX ou REM pour augmenter ou diminuer l'effet flou sur l'image. Cet article explique comment brouiller une image d'arrière-plan dans CSS.