Une page Web est faite de deux langues frontales de base: HTML et CSS. Tous les objets de la page Web créés dans le corps HTML sont stylisés via le CSS. La couleur est une propriété de base de CSS qui est appliquée à tous les objets sur le texte ou sur l'image également.

La feuille de style CSS a une fonction intégrée qui est utilisée pour inverser les couleurs au contenu du corps HTML. Cet article contiendra une explication concernant l'inversion des couleurs du texte et de l'image également. La syntaxe de base de la fonction inverse est:

Invert (montant appliqué à l'objet)

Ce paramètre unique contient le montant en pourcentage dans quelle mesure l'inversion des couleurs doit être effectuée. La valeur de cette fonction pour l'image d'origine est de 0%. Tandis que, si la valeur de la fonction inverse est de 100%, les couleurs sont inversées. La valeur de 50% montre que l'image sera une couleur gris complètement solide car tous les pixels sont recouverts de couleur grise.

Exemple 1: CSS inverse la couleur du texte:

Dans cet exemple, nous verrons comment les couleurs du texte de la page Web sont modifiées en utilisant la fonction inversée. Avant de nous diriger vers les codes, nous aimerions afficher l'image d'origine de la page Web sur laquelle nous appliquerons l'effet de la fonction de couleur inversée.

Cette page Web est simplement formée en utilisant des balises HTML et CSS. Rubriques

et

, et

Les balises corporelles HTML sont-elles responsables de ces textes affichés sur la page Web. Tandis que le CSS contient la couleur de police qui leur est appliquée car la couleur de police par défaut est toujours noire en HTML.

Maintenant, considérez un simple code HTML utilisé pour concevoir cette page. À l'intérieur de la partie corps, une rubrique

est déclaré. Pour appliquer la fonction inversée sur le texte, nous avons utilisé le CSS interne pour le style. Comme nous connaissons tous les types de CSS, le CSS interne est déclaré en utilisant la balise de style, à l'intérieur de la tête du code HTML. Ce style se fait en utilisant des ID et des classes dans la balise de style. Ces classes et ID sont accessibles via leurs noms écrits dans les balises de contenu de HTML.

Par exemple, à l'intérieur de l'en-tête, nous avons utilisé un mot-clé de classe avec le nom de la classe qui est "invert_effecte". Cette classe est déclarée à l'intérieur de la partie style.

1

… .

Un effet similaire est appliqué sur

Et le paragraphe.

Après cela, fermez les étiquettes du corps HTML. La balise de style contiendra le style pour les deux titres. Cet effet est la couleur de la police. Les deux titres ont des couleurs différentes.

1 2 3 4 5

H1 Couleur violet;

De même, le paragraphe est également conçu en y ajoutant la couleur de la police. Ensuite, nous avons appliqué un effet au corps pour afficher tous les contenus de HTML au centre de la page Web. L'alignement est donné à l'ensemble du contenu de la partie du corps HTML.

Après cela, l'effet principal qui est la fonction inversée de couleur () est défini comme une classe.

1 2 3 4

.invert_effect Filtre: Invert (100%);

La classe est déclarée avec un arrêt complet au début qui est l'identité de la classe.

En utilisant cette fonction, toutes les couleurs du texte des en-têtes et des paragraphes seront modifiées. Toutes les couleurs d'origine sont filtrées. Les couleurs laissées derrière sont représentées. Nous avons utilisé le pourcentage inversé comme 100%. Ou toutes les couleurs seront inversées à fond.

Fermez la balise de style. Ensuite, enregistrez le fichier texte avec le .Extension HTML pour ouvrir le fichier avec le bloc-notes au format texte et le navigateur sous la forme de la page Web.

Lorsque la page Web est chargée dans le navigateur, vous verrez que les couleurs de l'ensemble du corps du texte sont modifiées. Cela est dû à la fonction inversée qui est appliquée au texte.

Exemple 2: CSS inverse la couleur de l'image:

Après avoir appliqué l'effet de couleur inversée sur le texte, nous appliquerons ce filtre à l'image. Dans l'exemple précédent, il y avait très peu de couleurs utilisées dans le contenu du texte HTML. Mais maintenant, nous avons utilisé une image avec une variété de couleurs pour appliquer la fonction de couleur inversée sur cette image. Laissez-nous un exemple d'image JPEG avec des fleurs multicolores. Jpeg est un format d'image qui contient un arrière-plan avec lui. L'image ci-dessous a un fond blanc.

Cette image sera utilisée dans le code pour appliquer la fonction inverse dessus. Tout d'abord, considérez la partie du corps HTML. À l'intérieur de l'étiquette du corps, nous avons utilisé le même titre avec une image. Une image est utilisée sur la page Web en donnant la source de l'image. L'emplacement est également le PC ou l'Internet. Nous avons utilisé le fichier téléchargé.

1

La balise d'image contient le nom de la classe pour appliquer l'effet inversé dessus. Se dirigeant vers la section CSS, le style de la tête reste le même. L'image est stylée en fournissant les dimensions proportionnelles de l'image, y compris la hauteur et la largeur de l'image. La classe Invert_Effect aura également la même valeur filtrée à appliquer à l'image.

Enregistrez le code et exécutez le fichier HTML sur le navigateur. Vous verrez que toutes les couleurs présentes à l'origine sur les fleurs sont modifiées. La couleur d'arrière-plan est également affectée par la fonction inversée.

De cette façon, le filtre de la fonction inverse est appliqué à toutes les couleurs en texte brut ou sur les images également.

Informations Complémentaires:

La couleur grise est responsable de l'inversion des couleurs. Ainsi, pour une expérience, nous avons diminué la valeur inversée à 38%, pour voir quels seront les résultats.

1 2 3 4

.invert_effect Filtre: Invert (38%);

La sortie a l'image d'origine avec une couche peu claire de couleur grisâtre qui a fait l'image entre la condition originale et inversée.

Conclusion:

CSS Invert Color est une fonction qui dépend des couleurs de l'objet HTML. Pour donner à votre objet une gamme unique de couleurs, nous utilisons cette fonction. Au début du tutoriel, nous avons expliqué quelle est cette fonction en donnant sa syntaxe et son paramètre. Ensuite, nous avons utilisé deux exemples de base pour élaborer un bon fonctionnement de la fonction inversée dans CSS. Cette propriété est liée au filtre des couleurs, dans laquelle toutes les couleurs sont modifiées en fournissant le montant spécifié. Nous avons également appliqué l'effet de filtre sur le texte et l'image pour fournir à l'utilisateur le moyen le plus simple d'utiliser la fonction inversée de CSS.