Quels sont les filtres supportés par CSS3 ?

Les filtres pris en charge par CSS3 sont des effets visuels définis par l'attribut filter, notamment : 1. Filtre de flou, qui peut définir un flou gaussien sur l'image ; 2. Filtre de luminosité ; 3. Filtre de contraste ; 4. Filtre de projection ; filtre ; 6. Filtre de rotation de teinte ; 7. Filtre d'image inversé ; 8. Filtre de transparence ;

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les filtres pris en charge par CSS3 sont des effets visuels définis par l'attribut filter.

Fonction (effet visuel) qui peut être définie par l'attribut de filtre

1 Filtre de flou (px)

Définissez le flou gaussien sur l'image. Plus la valeur est grande, plus l'image est floue. La valeur par défaut est 0, ce qui signifie qu'il n'y a pas de flou.

filter:blur(4px);

2. Filtre de luminosité (%)

Appliquez une multiplication linéaire à l'image pour la rendre plus claire ou plus sombre. Si la valeur est 0%, l'image sera complètement noire. Si la valeur est de 100 %, il n'y aura aucun changement dans l'image. D'autres valeurs correspondent à des effets multiplicateurs linéaires. Les valeurs supérieures à 100 % sont acceptables et l'image sera plus lumineuse qu'avant. Si aucune valeur n'est définie, la valeur par défaut est 1.

 filter: brightness(200%);

3. Filtre de contraste (%)

Ajustez le contraste de l'image. Si la valeur est 0%, l'image sera complètement noire. La valeur est de 100 % et l'image reste inchangée. Les valeurs peuvent dépasser 100 %, ce qui signifie qu'une comparaison inférieure sera utilisée. Si aucune valeur n'est définie, la valeur par défaut est 1.

 filter: contrast(200%);

4. Le filtre de projection (décalage x et couleur de la plage de flou)

est très similaire à l'attribut box-shadow ; la différence est que grâce au filtre, certains navigateurs fourniront une accélération matérielle pour de meilleures performances.

 filter: drop-shadow(8px 8px 10px red);

5. Filtre en niveaux de gris (%)

Convertissez l'image en niveaux de gris. La valeur définit l'échelle de la conversion. Si la valeur est de 100 %, l'image sera entièrement convertie en niveaux de gris, et si la valeur est de 0 %, l'image restera inchangée. Si elle n’est pas définie, la valeur par défaut est 0. Vous pouvez également écrire des décimales entre 0 et 1.

 filter:grayscale(0.5);

6. Filtre de rotation de teinte (deg)

Appliquez une rotation de teinte à l'image. Laissez les couleurs de l’image tourner en conséquence dans le cercle de teintes. Si la valeur est 0deg, il n'y aura aucun changement dans l'image. Si la valeur n'est pas définie, la valeur par défaut est 0deg. Bien que cette valeur n'ait pas de valeur maximale, une valeur supérieure à 360 degrés équivaut à faire un nouveau tour.

 filter: hue-rotate(90deg);

7. Inverser le filtre d'image (%)

Inversez l'image d'entrée. La valeur définit l'échelle de la conversion. 100 % de la valeur est une inversion complète. Une valeur de 0 % signifie qu'il n'y a aucun changement dans l'image. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si la valeur n'est pas définie, la valeur par défaut est 0.

 filter: invert(100%);

8. Filtre de transparence (%)

La transparence de l'image. Une valeur de 0 % signifie une transparence totale, une valeur de 100 % signifie aucune modification de l'image. Entre 0 et 100 %, il est partiellement transparent. Vous pouvez également utiliser des décimales entre 0 et 1 au lieu de %.
Très similaire à l'attribut d'opacité existant, la différence est que grâce au filtre, certains navigateurs fourniront une accélération matérielle pour améliorer les performances.

 filter: opacity(30%);

9. Filtre de saturation (%)

Une valeur de 0% signifie qu'elle est complètement insaturée, et une valeur de 100% signifie qu'il n'y a aucun changement dans l'image. Si elle est supérieure à 100%, la saturation augmentera et la couleur deviendra plus lourde.

 filter: saturate(800%);

10. Filtre sépia (%)

Convertissez l'image en sépia. Une valeur de 100 % est entièrement sépia et une valeur de 0 % laisse l'image inchangée. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si elle n’est pas définie, la valeur par défaut est 0.

 filter: sepia(100%);

Utiliser le code :

&:hover {
          -webkit-filter: opacity(0.5%);
          -o-filter: opacity(0.5);
          -moz-filter: opacity(0.5);
          -ms-filter: opacity(0.5);
          filter: opacity(0.5);
        }

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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!