Une introduction détaillée à l'attribut filter de CSS3

Aujourd'hui, je vais vous donner une explication détaillée de l'attribut filtre en CSS3. Il est très puissant et peut effectuer des opérations similaires sur les images du. page Web. Effets de traitement d'image sur PS. Nous pouvons manipuler CSS pour traiter les images.

Prise en charge du navigateur : seul le navigateur IE ne prend pas en charge l'attribut de filtre. Afin d'être compatible avec les versions inférieures des navigateurs Safari et Google, le préfixe -webkit-.

L'attribut filter (filter) prend actuellement en charge les effets suivants dans la spécification :

niveaux de gris en niveaux de gris (la valeur est une décimale comprise entre 0 et 1)

filter:grayscale (1 ); -webkit-filter:grayscale(1);

0 signifie que l'échelle de gris est de 0 % et que l'image originale est affichée, 1 signifie que l'échelle de gris est de 100 % de gris.

marron sépia (la valeur est une décimale comprise entre 0 et 1)

filter:sepia(1); -webkit-filter:sepia(1);

0 signifie Le le brun est de 0 %, montrant l'image originale, et 1 signifie que le brun est de 100 %, montrant le brun.

saturer la saturation (la valeur est num)

filter:saturate(1.8); -webkit-filter:saturate(1.8);

0 signifie que la saturation est 0, l'image s'affiche noir et blanc, 0,5 signifie que la saturation est la moitié de l'image originale, 1 signifie que la saturation est égale à l'image originale et une valeur supérieure à 1 signifie que la saturation est améliorée.

teinte-rotation rotation de la teinte (la valeur est l'angle) angle deg

filter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);

Indique l'angle spécifique de rotation de la teinte.

inverser la couleur inversée (la valeur est une décimale comprise entre 0 et 1)

filter:invert(1); -webkit-filter:invert(1);

0 It signifie afficher l'image originale sans inverser la couleur, 1 signifie inverser la couleur à 100 %.

transparence de l'opacité (la valeur est une décimale comprise entre 0 et 1)

filter:opacity(0.5); -webkit-filter:opacity(0.5);

0 signifie entièrement transparent, 0,5 signifie translucide, 1 signifie 100 % complètement opaque.

b

droiteluminosité (la valeur est num)

filter:brightness(2); -webkit-filter:brightness(2);

0 signifie que la luminosité est de 0 et affiche du noir, 0,5 signifie que la luminosité est la moitié de l'image d'origine, 1 signifie la luminosité de l'image d'origine et une valeur supérieure à 1 signifie que la luminosité est améliorée.

contraste de contraste (la valeur est num)

filter:contrast(1.8); -webkit-filter:contrast(1.8);

0 signifie que le contraste est de 0, ce qui est une couleur unie, 0,5 signifie que le contraste est la moitié de l'image originale, 1 signifie le contraste de l'image originale, la valeur est supérieure à 1, plus la valeur est grande, plus le contraste est fort.

flou flou (la valeur est la longueur)

filter:blur(5px); -webkit-filter:blur(5px);

représente la valeur en pixels du degré de se brouiller.

drop-shadow

filter:drop-shadow(0 0 10px #000); -webkit-filter:drop-shadow(0 0 10px #000);

Même valeur que la propriété CSS3 box-shadow.

Plusieurs valeurs d'attribut peuvent être écrites ensemble, séparées par des espaces, similaire à trans

form écriture multi-attributs

Je crois l'avoir lu. Vous maîtrisez les méthodes dans ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment utiliser CSS pour créer des effets de rotation d'image

Solution au problème de la couleur d'arrière-plan ne peut pas être affiché en HTML

Comment optimiser les pages Web HTML

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!