Guide des propriétés de filtrage CSS : filtre et niveaux de gris

Guide des attributs de filtre CSS : filtre et niveaux de gris

Introduction :
L'attribut de filtre (filtre) en CSS peut ajouter divers effets et effets spéciaux à la page Web, rendant la page plus riche et attrayante. Parmi eux, les niveaux de gris sont un effet de filtre couramment utilisé qui peut convertir les images en tons noir et blanc. Dans cet article, nous présenterons l'utilisation de l'attribut filter et des exemples de code, notamment pour la mise en œuvre d'effets en niveaux de gris.

1. Introduction à l'attribut filter :
L'attribut filter est un nouvel attribut de CSS3, qui nous permet d'effectuer un traitement d'image et des effets spéciaux lors du rendu des éléments. En utilisant l'attribut filter, nous pouvons traiter des images avec des effets de flou, de niveaux de gris, de luminosité, de contraste et d'autres effets. L'attribut filter peut être appliqué à tous les éléments, y compris les images, le texte, les arrière-plans, etc.

2. La syntaxe et les attributs communs de l'attribut filtre :
La syntaxe de base de l'attribut filtre est la suivante :

element {
    filter: none | <filter-function> [<filter-parameter>]* | initial | inherit;
}

Les fonctions d'attribut filtre couramment utilisées sont :

1. flou : floute l'image, la valeur est en pixels ou pourcentage.
2. luminosité : ajustez la luminosité de l'image, la valeur est en pourcentage.
3. contraste : ajustez le contraste de l'image, la valeur est en pourcentage.
4. niveaux de gris : convertissez l'image en niveaux de gris, la valeur est un pourcentage.
5. inverser : inversez l'image, la valeur est en pourcentage.
6. sépia : convertissez l'image en sépia, la valeur est en pourcentage.
7. saturate : changement de saturation, la valeur est en pourcentage.
8. opacité : définissez la transparence de l'élément, la valeur est un pourcentage.

3. Exemples de code :
Voici des exemples de code de certains effets de filtre couramment utilisés :

1. Effet de niveaux de gris (niveaux de gris) :

   img {
    filter: grayscale(100%);
   }

   Copier après la connexion

2. Effet de flou (flou) :

   element {
    filter: blur(5px);
   }

   Copier après la connexion

3. Effet de réglage de la luminosité (luminosité):

   element {
    filter: brightness(80%);
   }

   Copier après la connexion

4. Effet d'ajustement du contraste (contraste):

   element {
    filter: contrast(120%);
   }

   Copier après la connexion

5. Effet d'inversion (Invert):

   element {
    filter: invert(100%);
   }

   Copier après la connexion

6. sepia (sépia):

   element {
    filter: sepia(100%);
   }

   Copier après la connexion

7. saturation Changement (sature))) :

   element {
    filter: saturate(150%);
   }

   Copier après la connexion

8. Effet d'ajustement de la transparence des éléments (opacité) :

   element {
    filter: opacity(50%);
   }

   Copier après la connexion

   Ce qui précède ne sont que quelques exemples d'effets de filtre couramment utilisés. En utilisation réelle, les valeurs des paramètres peuvent être ajustées en fonction des besoins. Vous pouvez créer davantage d'effets spéciaux en combinant différents effets de filtre.

   Conclusion : 
   Grâce à l'attribut filter de CSS, nous pouvons ajouter divers traitements d'image et effets spéciaux aux pages Web, parmi lesquels les niveaux de gris sont l'un des effets de niveaux de gris couramment utilisés. Cet article présente brièvement la syntaxe de base et les propriétés communes de l'attribut filter, et donne quelques exemples de code d'effets courants. En utilisant de manière flexible l'attribut de filtre, vous pouvez ajouter plus d'attrait visuel à la page et améliorer l'expérience utilisateur.

   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!