Explication graphique détaillée de l'utilisation de l'attribut filter en CSS3 (exemple de code)

J'ai récemment découvert accidentellement un attribut particulièrement intéressant sur Internet, qui est l'attribut de filtre en CSS3. Cet attribut peut changer la couleur de l'image. Une image peut présenter plusieurs effets. pour vous expliquer comment utiliser le filtre en CSS3, ainsi qu'un exemple pour démontrer l'effet du filtre. Si vous êtes intéressé, veuillez continuer à lire ci-dessous.

Beaucoup de gens ne savent pas ce que signifie le filtre CSS. En termes simples, filtre fait référence à un filtre. L'attribut de filtre officiellement défini peut définir l'effet visuel (tel que le flou et la saturation) d'un élément (généralement ).

syntaxe de l'attribut de filtre : filtre : aucun | flou() | contraste() | niveaux de gris() | saturate() | sepia() | url();

Utilisation : lorsque , ajoutez simplement l'attribut de filtre directement à l'image qui doit être définie.

Vous pouvez voir que ses attributs ont de nombreuses valeurs facultatives. Présentons brièvement leur signification

1. niveaux de gris en niveaux de gris

2. )

3. saturer

4. teinte-rotation

5. inverser

6. opacité Transparence

7, luminosité

8, contraste

9, flou

10, ombre portée

Exemple 1 :

Utilisation l'attribut de filtre pour convertir l'image en image en niveaux de gris, et la valeur est le taux de conversion. Lorsque la valeur est de 100 %, elle est entièrement convertie en une image en niveaux de gris. Lorsque la valeur est de 0 %, il n'y a aucun changement dans l'image. Lorsque la valeur est comprise entre 0 % et 100 %, elle se situe entre l'échelle de gris complète et l'original. image. Dans cet exemple, l'échelle de gris est définie sur 50%

Code HTML :

<img  src="img/草莓.jpg"    style="max-width:90%" height="192px"/ alt="Explication graphique détaillée de l'utilisation de l'attribut filter en CSS3 (exemple de code)" >

Code CSS :

img {
	 -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
	filter: grayscale(50%);
    }

Rendu :

La première est l'image originale, et la seconde est l'effet réglé sur 50 % en niveaux de gris.

Exemple 2 :

Utilisez l'attribut de filtre pour définir l'image sur le flou gaussien, et la valeur "rayon" définit l'écart type de la fonction gaussienne, ou le screen Combien de pixels sont mélangés ensemble, donc plus la valeur est grande, plus elle est floue ; s'il n'y a pas de valeur définie, la valeur par défaut est 0 ; ce paramètre peut définir la valeur de longueur CSS, mais n'accepte pas les valeurs de pourcentage.

img {
	 -webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */
    	filter: blur(1.5px);
    }

Rendu :

Dans cet exemple, réglez le flou sur 1,5px pour donner à l'image un effet de flou gaussien, comme indiqué sur l'image .

Résumé : Ce qui précède présente comment utiliser le filtre d'attribut de filtre d'image dans CSS3. Il a de nombreuses valeurs d'attribut. Voici seulement deux démonstrations. Quant aux autres attributs, les amis peuvent créer les leurs. essayez, vous pourriez avoir des résultats inattendus.

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!