CSS change la couleur de l'image
Nous implémenterons les plusieurs exemples de ces fonctions que la propriété Filtre CSS fournit dans un fichier HTML.
Exemple 1: Utilisation de la propriété Filtre avec la fonction inverse pour styliser une image dans un fichier HTML
Dans cet exemple, nous utiliserons la fonction inversée de la propriété filtrante qui inversera toutes les valeurs d'échantillon d'une image. La fonction inverse peut accepter toutes les valeurs positives pour le degré d'inversion et seules les valeurs négatives ne sont pas acceptées. Cette fonction de la propriété filtrante peut changer à lui seul la couleur d'une image.
Dans ce script, nous commençons par ouvrir l'en-tête du fichier pour créer une classe de style pour l'élément d'image de la page HTML. Dans le style sous le nom de «l'image», nous créons une classe où nous définissons la propriété avec sa fonction qui modifie la couleur de l'image. Ensuite, nous fermons la balise de style et l'en-tête du fichier. Après cela, nous ouvrons l'étiquette corporelle où nous donnons une rubrique en utilisant la balise «H2». La première image est l'image colorée d'origine et n'a pas de propriétés de style tandis que la deuxième image est la même que la première, mais avec le style et la classe ajoutés à sa balise. Nous ajoutons les images dans le fichier via le chemin du fichier à l'aide du mot-clé «SRC». Après avoir fermé la balise d'image, nous terminons le fichier en fermant le corps et la balise HTML. Nous enregistrons le fichier dans le format approprié afin que nous puissions y accéder dans notre navigateur et recevoir les résultats suivants:
Comme nous pouvons le voir dans la sortie précédente, l'image de gauche a toutes les couleurs correctes tandis que l'image à droite a les couleurs inversées et a été transformée en une image différente.
Exemple 2: Utilisation de la propriété Filtre avec la fonction sépia pour styliser une image dans un fichier HTML
Dans cet exemple, nous utilisons la fonction sépia de la propriété du filtre pour changer toutes les couleurs d'une image en une couleur brune chaude ou jaune clair. La fonction sépia accepte toutes les valeurs de degré de conversion de couleur positive et rejette uniquement les valeurs négatives. Cette fonction de propriété filtrante a la capacité de modifier la couleur d'une image seule. À l'intérieur de la balise de style d'un fichier HTML, nous créerons une classe de style unique pour l'élément d'image.
Dans ce script, nous commençons par accéder à l'en-tête du fichier pour créer une classe de style pour l'élément d'image de la page HTML. Dans la balise de style, nous construisons une classe où nous définissons la propriété ainsi que sa méthode, qui modifie la couleur de l'image. La balise de style et l'en-tête du fichier seront ensuite fermées. Après cela, nous ouvrons la balise corporelle et insérons une rubrique en utilisant la balise «H2». Ensuite, en utilisant l'élément «IMG», nous plaçons les deux images sur notre écran. La première image est l'image couleur originale sans caractéristiques de style, tandis que la deuxième image est la même que la première mais avec la classe de style incluse dans sa balise. À l'aide du mot clé «SRC», nous insérons les photos dans le fichier via le chemin du fichier.
Comme le montre la sortie précédente, l'image de gauche a toutes les couleurs correctes. Cependant, celui de droite a les couleurs assorties.
Exemple 3: Utilisation de la propriété Filtre avec la fonction de niveaux de gris pour styliser une image dans un fichier HTML
Dans cet exemple, nous utiliserons la fonction de filtre en niveaux de gris pour convertir toutes les couleurs d'une photo en noir, blanc et gris. Cette fonction de propriété filtrante peut modifier la couleur d'une photographie et la transformer en une image en niveaux de gris. Nous développerons une classe de style unique pour l'élément d'image dans la balise de style d'un fichier HTML.
Dans ce script, nous entrons d'abord l'en-tête du fichier pour générer une classe de style pour l'élément d'image de la page HTML. Nous définissons la propriété ainsi que la méthode pour modifier la couleur de l'image dans une classe. La balise de style et l'en-tête du fichier seront ensuite fermées. Ensuite, nous ouvrons la balise corporelle et insérons un titre à l'aide de la balise «H2». Ensuite, nous utilisons l'élément «IMG» pour afficher les deux images de notre écran. La première image n'a pas de fonctionnalités de style, tandis que la deuxième image est la même que la première mais avec la classe de style ajoutée à sa balise. Nous insérons les photographies dans le fichier à l'aide du mot-clé «SRC» et du chemin du fichier.
L'image à gauche contient toutes les couleurs d'origine, comme indiqué dans la sortie précédente. Cependant, celui de droite a des teintes distinctes.
Exemple 4: Utilisation de la propriété Filtre avec les fonctions Opacital et Drop Shadow pour styliser une image dans un fichier HTML
Dans cet exemple, nous utiliserons les fonctions d'opacité et d'ombre de la propriété filtrante pour modifier toutes les couleurs d'une photo. Cette fonction de propriété filtrante modifie la couleur d'une photographie et la convertit en une nouvelle image.
Dans ce script, nous ajoutons d'abord l'en-tête du fichier pour produire une classe de style pour l'élément d'image sur la page HTML. Nous définissons la propriété ainsi que la méthode pour modifier la couleur de l'image dans une classe. La balise de style et l'en-tête du fichier seront ensuite fermées. Ensuite, nous ouvrons la balise corporelle et utilisons la balise «H2» pour insérer un titre. L'élément «IMG» est ensuite utilisé pour afficher les deux images de notre écran. La première image n'a pas de caractéristiques de style, tandis que la deuxième image est identique au premier mais avec la classe de style ajoutée à sa balise. Nous insérons des images dans le fichier en utilisant le mot-clé «SRC» et le chemin du fichier. Nous fermons le corps et les éléments HTML une fois que nous fermons la balise d'image.
La photo à gauche contient toutes les couleurs d'origine, tandis que celle de droite a changé les tons, comme indiqué dans la sortie précédente.
Conclusion
Nous avons discuté des différentes méthodes concernant le changement de la couleur d'une image dans un fichier HTML à l'aide de CSS. La propriété CSS la plus couramment utilisée est la propriété filtrante qui a des fonctions distinctes prédéfinies qui peuvent modifier la couleur d'une image et peuvent lui donner un aspect transformé. Nous avons mis en œuvre plusieurs de ces fonctions dans l'environnement du bloc-notes ++ pour mieux comprendre comment cette propriété fonctionne avec des fonctions distinctes.