Eine Webseite besteht aus zwei grundlegenden Front-End-Sprachen: HTML und CSS. Alle Objekte der Webseite, die im HTML -Körper erstellt wurden. Die Farbe ist eine grundlegende Eigenschaft von CSS, die auf alle Objekte entweder auf dem Text oder auch auf dem Bild angewendet wird.

Das CSS-Stilblatt verfügt über eine integrierte Funktion, mit der die Farben in den Inhalt des HTML-Körpers umgebunden werden. Dieser Artikel enthält eine Erklärung zur Farbinversion des Textes und des Bildes. Die grundlegende Syntax der Invert -Funktion lautet:

Invertiert (Betrag, der auf das Objekt angewendet wird)

Dieser einzelne Parameter enthält den Betrag in Prozent, inwieweit die Umkehrung der Farben durchgeführt werden sollte. Der Wert dieser Funktion für das Originalbild beträgt 0%. Wenn der Wert der Umkehrfunktion zu 100% beträgt, sind die Farben invertiert. Der Wert von 50% zeigt, dass das Bild eine völlig solide graue Farbe hat, da alle Pixel mit grauer Farbe bedeckt sind.

Beispiel 1: CSS umdreht die Farbe des Textes:

In diesem Beispiel werden wir sehen, wie sich die Farben des Textes der Webseite unter Verwendung der Invert -Funktion verändern. Bevor wir uns zu den Codes bewegen, möchten wir das Originalbild der Webseite anzeigen, auf dem wir den Effekt der umgekehrten Farbfunktion anwenden werden.

Diese Webseite wird einfach mithilfe von HTML- und CSS -Tags gebildet. Überschriften

Und

, Und

sind die HTML -Body -Tags, die für diese Texte verantwortlich sind, die auf der Webseite angezeigt werden. Während das CSS die auf sie angewendete Schriftfarbe enthält, weil die Standard -Schriftfarbe in HTML immer schwarz ist.

Betrachten Sie nun einen einfachen HTML -Code, mit dem diese Seite gestaltet wird. Im Körperteil eine Überschrift

wird deklariert. Um die Invert -Funktion im Text anzuwenden, haben wir interne CSS zum Styling verwendet. Da wir mit allen Arten von CSS vertraut sind, wird interne CSS mit dem Style -Tag im Kopf des HTML -Codes deklariert. Dieses Styling erfolgt durch die Verwendung von IDs und Klassen im Style -Tag. Diese Klassen und IDs werden über ihre Namen zugegriffen, die in den Inhalts -Tags von HTML geschrieben wurden.

In der Überschrift haben wir beispielsweise ein Schlüsselwort der Klasse mit dem Namen der Klasse verwendet, die "invert_effect" ist. Diese Klasse wird im Stil der Stil deklariert.

1

… .

Ein ähnlicher Effekt wird auf angewendet

und der Absatz.

Schließen Sie danach die HTML -Körper -Tags. Das Style -Tag enthält den Stil für beide Überschriften. Dieser Effekt ist die Schriftfarbe. Beide Überschriften haben unterschiedliche Farben.

1 2 3 4 5

H1 Farbe lila;

In ähnlicher Weise wird der Absatz auch durch Hinzufügen einer Schriftfarbe zu ihm gestaltet. Dann haben wir einen Effekt auf den Körper angewendet, um den gesamten Inhalt von HTML in der Mitte der Webseite anzuzeigen. Ausrichtung wird dem gesamten Inhalt des HTML -Körperteils gegeben.

Danach ist der Haupteffekt, der die Farb -Invert -Funktion () ist, als Klasse definiert.

1 2 3 4

.invert_effect Filter: Invert (100%);

Die Klasse wird zu Beginn mit einem vollen Stopp deklariert, der die Identität der Klasse ist.

Durch die Verwendung dieser Funktion werden alle Farben des Textes von Überschriften und Absätzen geändert. Alle Originalfarben werden gefiltert. Die Farben, die zurückgelassen werden, sind gezeigt. Wir haben den Umkehranteil als 100% verwendet. Oder alle Farben werden gründlich invertiert.

Schließen Sie das Style -Tag. Speichern Sie dann die Textdatei mit der .HTML -Erweiterung, um die Datei sowohl im Textformat als auch mit dem Notepad im Textformat als auch in Form der Webseite zu öffnen.

Wenn die Webseite im Browser geladen wird, werden Sie feststellen, dass die Farben des gesamten Textkörpers geändert werden. Dies liegt an der umgekehrten Funktion, die auf den Text angewendet wird.

Beispiel 2: CSS umdreht die Farbe des Bildes:

Nachdem wir den umgekehrten Farbton -Effekt auf den Text angewendet haben, wenden wir diesen Filter auf das Bild an. Im vorherigen Beispiel wurden im HTML -Textinhalt nur sehr wenige Farben verwendet. Aber jetzt haben wir ein Bild mit einer Vielzahl von Farben verwendet, um die invertierende Farbfunktion auf diesem Bild anzuwenden. Lassen Sie uns ein Beispiel-JPEG-Bild mit mehrfarbigen Blüten haben. JPEG ist ein Bildformat, das einen Hintergrund enthält. Das folgende Bild hat einen weißen Hintergrund.

Dieses Bild wird im Code verwendet, um die Invert -Funktion darauf anzuwenden. Betrachten Sie zunächst den HTML -Körperanteil. Innerhalb des Body -Tags haben wir die gleiche Überschrift mit einem Bild verwendet. Auf der Webseite wird ein Bild verwendet, indem die Quelle des Bildes angegeben wird. Der Standort ist entweder der PC oder das Internet. Wir haben die heruntergeladene Datei verwendet.

1

Das Bild -Tag enthält den Namen der Klasse, um den Invert -Effekt darauf anzuwenden. Wenn Sie sich in Richtung CSS -Abschnitt bewegen, bleibt der Stil für die Überschrift gleich. Das Bild wird so gestaltet, dass die proportionalen Abmessungen des Bildes einschließlich Bildhöhe und Breite bereitgestellt werden. Die invert_effect -Klasse hat auch denselben gefilterten Wert, der auf das Bild angewendet wird.

Speichern Sie den Code und führen Sie die HTML -Datei im Browser aus. Sie werden sehen, dass alle ursprünglich auf den Blumen vorhandenen Farben geändert werden. Die Hintergrundfarbe wird auch von der Umkehrfunktion beeinflusst.

Auf diese Weise wird der Filter der Umkehrfunktion auf alle Farben entweder im einfachen Text oder auch auf den Bildern angewendet.

Weitere Informationen:

Die graue Farbe ist für die Inversion der Farben verantwortlich. Für ein Experiment haben wir den Umkehrwert auf 38%verringert, um zu sehen, wie die Ergebnisse aussehen werden.

1 2 3 4

.invert_effect Filter: Invert (38%);

Die Ausgabe hat das Originalbild mit einer unklaren Schicht grauer Farbe, die das Bild zwischen dem ursprünglichen und invertierten Zustand gemacht hat.

Abschluss:

CSS -Invert -Farbe ist eine Funktion, die von den Farben des HTML -Objekts abhängt. Um Ihrem Objekt eine einzigartige Farbpalette zu geben, verwenden wir diese Funktion. Zu Beginn des Tutorials haben wir erklärt, was diese Funktion ist, indem wir ihre Syntax und Parameter geben. Anschließend verwendeten wir zwei grundlegende Beispiele, um die ordnungsgemäße Arbeit der Invert -Funktion in CSS zu erläutern. Diese Eigenschaft bezieht sich auf den Farbenfilter, in dem alle Farben geändert werden, indem die angegebene Menge bereitgestellt wird. Wir haben den Filtereffekt sowohl auf den Text als auch das Bild angewendet, um dem Benutzer den einfachsten Weg zur Verwendung der Invert -Funktion von CSS zu bieten.