Les filtres CSS peuvent obtenir une variété d'effets visuels. 1. Utilisez des niveaux de gris () pour convertir l'image en un diagramme en niveaux de gris, qui est souvent utilisé pour la commutation d'état interactive; 2. Blur () réalise le flou gaussien, adapté au flou d'arrière-plan et à d'autres scénarios; 3. Ajuster respectivement la luminosité, le contraste et la saturation par la luminosité (), le contraste () et la saturer (), et l'utiliser en combinaison pour créer un ton diversifié; 4. Plusieurs filtres peuvent être utilisés en superposant des espaces, mais l'attention doit être accordée à la commande et à l'impact des performances. Ces filtres sont simples et efficaces, adaptés à l'amélioration de l'expression des pages.

Les filtres CSS sont un outil très pratique qui peut réaliser directement certains effets visuels sur les pages Web, tels que le flou, l'ajustement du contraste, l'affichage des niveaux de gris, etc. Ils sont non seulement simples et faciles à utiliser, mais ont également une bonne compatibilité, ce qui les rend adaptés au traitement d'image ou aux effets spéciaux de la page.

Voici les effets et les usages les plus couramment utilisés dans le développement réel:

Style gris ou noir et blanc

Parfois, pour unifier le style visuel ou mettre en évidence un certain état (comme un état désactivé), l'image doit être transformée en ton gris. à l'heure actuelle, vous pouvez utiliser grayscale() .

 img {
  Filtre: niveaux de gris (100%);
}

• Les paramètres sont des pourcentages, 100% signifie une échelle de gris complète 0% signifie l'image d'origine.
• Cette méthode est souvent utilisée pour les effets de commutation de survol de la souris, tels que:

 IMG: Hover {
  Filtre: niveaux de gris (0%);
}

De cette fa?on, l'image est restaurée pour colorer lorsque l'utilisateur le déplace, ce qui a un sentiment d'interaction, et il n'est pas nécessaire de préparer deux images.

Blur gaussien

L'effet flou est également une exigence commune, telle que le flou fond pop-up, l'aper?u de l'image, etc.

 .Blur-Effet {
  Filtre: flou (5px);
}

• Le paramètre est la valeur des pixels et plus le nombre est important, plus il devient flou.
• Remarque: un flou trop grand affectera les performances, en particulier lorsque vous utilisez un flou dynamique pour les grandes images.
• Une approche commune consiste à utiliser un flou dans les animations de transition, comme l'ajout d'un point de flou avant la décoloration, pour rendre le visuel plus naturel.

Ajuster la luminosité, le contraste, la saturation

Ces filtres peuvent être utilisés seuls ou combinés pour ajuster la tonalité globale de l'image:

 img {
  Filtre: luminosité (80%) Contraste (120%) sature (150%);
}

• brightness() contr?le la luminosité, 100% est la luminosité d'origine, moins de 100% de gradation.
• contrast() contr?le le contraste, 100% est inchangé, plus la valeur est élevée, plus le contraste est fort.
• saturate() contr?le la saturation des couleurs, 100% est l'image d'origine, plus la valeur est élevée, plus la couleur est lumineuse.

Ces paramètres peuvent être appariés de manière flexible en fonction des besoins de conception, tels que l'affichage d'une image en "mode nuit" pour réduire de manière appropriée la luminosité et le contraste.

Plusieurs filtres sont superposés

CSS vous permet d'écrire plusieurs fonctions de filtre dans une propriété de filtre, les séparez simplement avec des espaces:

 .Filter-Combo {
  Filtre: luminosité (90%) sépia (30%) flou (2px);
}

Il est nécessaire de prêter attention au problème de la commande: bien que l'ordre n'affecte pas particulièrement le résultat final dans la plupart des cas, il peut y avoir des interactions entre certains filtres. Il est recommandé de l'organiser par ordre logique, tel que le traitement des couleurs d'abord, puis le flou.

De plus, l'utilisation de plusieurs filtres augmentera la charge de rendu, en particulier lorsqu'elle est utilisée en grande quantité d'éléments ou d'effets d'animation, n'oubliez pas de tester les performances.

En général, les filtres CSS sont une méthode d'amélioration visuelle légère et efficace qui peut apporter de bons changements visuels sans s'appuyer sur des ressources supplémentaires. La ma?trise de quelques fonctions couramment utilisées et la combinaison d'un peu de transition ou d'interaction peuvent améliorer l'expressivité de nombreuses pages.

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!