Maison > Article > interface Web > Explication détaillée des propriétés de flou CSS : filtre et toile de fond-filtre
Explication détaillée de l'attribut de flou CSS : filtre et toile de fond-filtre
Introduction :
Lors de la conception de pages Web, nous avons souvent besoin d'effets spéciaux pour augmenter l'attrait visuel de la page. L'effet de flou est l'un des effets spéciaux courants. CSS fournit deux propriétés de flou : filter et background-filter, qui sont utilisées respectivement pour flouter le contenu de l'élément et le contenu de l'arrière-plan. Cet article explique ces deux propriétés en détail et fournit quelques exemples de code concrets.
1. Attribut de filtre
L'attribut de filtre est utilisé pour flouter le contenu des éléments. Il peut obtenir une variété d’effets différents, notamment le flou gaussien, le réglage de la luminosité, le réglage du contraste, etc. Voici quelques valeurs d'attributs de filtre couramment utilisées et leurs effets.
.blur { filter: blur(5px); }
.brightness { filter: brightness(0.5); }
.contrast { filter: contrast(2); }
.invert { filter: invert(100%); }
.hue-rotate { filter: hue-rotate(90deg); }
2. Attribut Background-filter
L'attribut background-filter est utilisé pour flouter le contenu d'arrière-plan de l'élément. Son utilisation est similaire à l'attribut filter, mais il fonctionne sur l'arrière-plan de l'élément plutôt que sur le contenu de l'élément lui-même. Vous trouverez ci-dessous quelques valeurs de propriétés de filtre de toile de fond couramment utilisées et leurs effets.
.backdrop-blur { backdrop-filter: blur(5px); }
.backdrop-brightness { backdrop-filter: brightness(0.5); }
.backdrop-contrast { backdrop-filter: contrast(2); }
.backdrop-invert { backdrop-filter: invert(100%); }
.backdrop-hue-rotate { backdrop-filter: hue-rotate(90deg); }
Conclusion :
Les propriétés de filtre et de filtre de fond de CSS nous offrent une riche sélection d'effets de flou, rendant la conception des pages Web plus colorée. En utilisant rationnellement ces attributs, la page peut présenter un effet plus cool. Cependant, il convient de noter que différents navigateurs peuvent rencontrer des problèmes de compatibilité lors de l'utilisation de ces attributs. Des tests de compatibilité sont donc nécessaires lors de l'utilisation réelle pour garantir des effets cohérents.
Lien de référence :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!