Conseils d'optimisation des propriétés du verre dépoli CSS : filtre et filtre de toile de fond

Compétences d'optimisation des attributs de verre dépoli CSS : filtre et filtre d'arrière-plan

Dans la conception Web moderne, l'effet de verre dépoli (Flou) est largement utilisé dans l'arrière-plan ou les images de certains éléments d'interface pour fournir une vision floue et douce. Effet. Dans le passé, le principal moyen d'obtenir l'effet de verre dépoli consistait à utiliser un logiciel de traitement d'image pour rendre l'image floue, puis à utiliser l'image floue comme arrière-plan. Cependant, cette méthode nécessite des ressources d'image supplémentaires et ne peut pas ajuster dynamiquement le degré d'effet de flou. Avec le développement de CSS3, nous pouvons obtenir des effets de verre dépoli dynamiques grâce aux propriétés CSS sans ressources d'image supplémentaires.

Le filtre de propriétés CSS et le filtre de toile de fond peuvent être utilisés pour obtenir un effet de verre dépoli et conviennent à différentes scènes. L'attribut filter est utilisé pour filtrer le contenu de l'élément, tandis que l'attribut background-filter peut filtrer l'arrière-plan de l'élément. Ci-dessous, nous présenterons ces deux propriétés en détail et donnerons des exemples de code spécifiques.

1. Attribut Filtre

L'attribut filtre est un filtre général qui peut être appliqué au contenu des éléments, notamment le texte, les images, etc. Utilisez cet attribut pour obtenir le flou, le réglage de la luminosité, le réglage du contraste, le réglage de la saturation et d'autres effets sur le contenu de l'élément. Parmi eux, l'effet de flou peut être utilisé pour obtenir l'effet de verre dépoli.

1. Effet de flou

Pour obtenir un effet de flou, vous pouvez définir la valeur de l'attribut de filtre sur flou(valeur), où la valeur représente le degré de flou. De manière générale, la plage de valeurs est comprise entre 0 et 10 px. Plus la valeur est grande, plus le degré de flou est élevé.

.blur-effect {
  filter: blur(5px);
}

2. Réglage de la luminosité

Si vous souhaitez régler la luminosité du contenu de l'élément, vous pouvez utiliser l'attribut luminosité(valeur). La valeur de cette propriété est un pourcentage, avec une valeur de 100 % représentant la luminosité d'origine, une valeur inférieure à 100 % représentant une luminosité réduite et une valeur supérieure à 100 % représentant une luminosité accrue.

.brightness-effect {
  filter: brightness(80%);
}

3. Réglage du contraste

Pour ajuster le contraste du contenu de l'élément, vous pouvez utiliser l'attribut contrast(value). La valeur de cette propriété est également un pourcentage, avec une valeur de 100 % représentant le contraste d'origine, une valeur inférieure à 100 % représentant un contraste réduit et une valeur supérieure à 100 % représentant un contraste accru.

.contrast-effect {
  filter: contrast(150%);
}

4. Ajustement de la saturation

Pour ajuster la saturation du contenu d'un élément, vous pouvez utiliser l'attribut saturate(value). La valeur de cette propriété est également un pourcentage, avec une valeur de 100 % représentant la saturation d'origine, une valeur inférieure à 100 % représentant une saturation réduite et une valeur supérieure à 100 % représentant une saturation accrue.

.saturation-effect {
  filter: saturate(200%);
}

2. Attribut Context-filter

L'attribut backgrounddrop-filter est nouveau dans CSS3. Il peut être appliqué à l'arrière-plan d'un élément au lieu du contenu de l'élément. Utilisez cet attribut pour obtenir le flou, le réglage de la luminosité, le réglage du contraste, le réglage de la saturation et d'autres effets sur l'arrière-plan de l'élément. Il convient également pour obtenir l'effet de verre dépoli.

1. Effet de flou

Pour obtenir l'effet de flou d'arrière-plan, vous pouvez définir la valeur de l'attribut toile de fond-filtre sur flou (valeur).

.backdrop-blur-effect {
  backdrop-filter: blur(5px);
}

2. Réglage de la luminosité

Pour régler la luminosité de l'arrière-plan, vous pouvez utiliser la luminosité (valeur) de la propriété background-filter.

.backdrop-brightness-effect {
  backdrop-filter: brightness(80%);
}

3. Réglage du contraste

Pour régler le contraste de l'arrière-plan, vous pouvez utiliser le contraste (valeur) de l'attribut toile de fond-filtre.

.backdrop-contrast-effect {
  backdrop-filter: contrast(150%);
}

4. Réglage de la saturation

Pour régler la saturation de l'arrière-plan, vous pouvez utiliser la saturation (valeur) de l'attribut toile de fond-filtre.

.backdrop-saturation-effect {
  backdrop-filter: saturate(200%);
}

En résumé, en utilisant les propriétés de filtre et de filtre de fond de CSS, nous pouvons obtenir de manière flexible divers effets de verre dépoli sans avoir besoin d'outils de traitement d'image supplémentaires, ce qui rend la conception de la page plus concise et efficace. Il convient de noter que, comme ces propriétés sont encore expérimentales à l'heure actuelle, la compatibilité des différents navigateurs et plates-formes peut varier, des tests de compatibilité sont donc nécessaires lors de leur utilisation.

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!