CSS ändern die Bildfarbe

In diesem Artikel konzentrieren wir uns auf die Methoden zum Ändern der Farbe eines Bildes, das das CSS bietet. Die häufig verwendete Eigenschaft in diesem Szenario ist die Filtereigenschaft, die für das Bild -Tag der Hypertext -Markup -Sprache gilt. Mit der Filterfunktion können Sie die verschiedenen Funktionen auf ein Bild wie „Invert“, „Graustufe“, „Sepia“ und „Drop Shadow“ anwenden, und „invertiert“, „Graustufen“ anwenden, und „Schattenropfen“ anwenden. Diese unterschiedlichen Funktionen liefern verschiedene Variationen eines Bildes, indem die Farbkomponenten und die sichtbaren Elemente des Bildes verändert werden.

Wir werden die verschiedenen Beispiele dieser Funktionen implementieren, die die CSS -Filtereigenschaft in einer HTML -Datei bereitstellt.

Beispiel 1: Verwenden der Filtereigenschaft mit der Invert -Funktion, um ein Bild in einer HTML -Datei zu stylen

In diesem Beispiel werden wir die Invert -Funktion der Filtereigenschaft verwenden, die alle Beispielwerte eines Bildes invertiert. Die Umkehrfunktion kann alle positiven Werte für den Grad der Inversion akzeptieren, und nur die negativen Werte werden nicht akzeptiert. Diese Funktion der Filtereigenschaft kann die Farbe eines Bildes im Alleingang ändern.

In diesem Skript öffnen wir zunächst den Header der Datei, um eine Styling -Klasse für das Bildelement der HTML -Seite zu erstellen. Im Stil unter dem Namen „Bild“ erstellen wir eine Klasse, in der wir die Eigenschaft zusammen mit ihrer Funktion definieren, die die Farbe des Bildes verändert. Dann schließen wir das Style -Tag und den Header der Datei. Danach öffnen wir das Body -Tag, wo wir mit dem "H2" -Tag einen Übergang geben. Das erste Bild ist das originale farbige Bild und hat keine Styling -Eigenschaften darin, während das zweite Bild dem ersten ist, sondern mit dem Stil und der Klasse, die seinem Tag hinzugefügt wurde. Wir fügen die Bilder in der Datei über den Dateipfad mit dem Schlüsselwort "SRC" hinzu. Nach dem Schließen des Bild -Tags beenden wir die Datei, indem wir den Körper und das HTML -Tag schließen. Wir speichern die Datei im richtigen Format, damit wir in unserem Browser darauf zugreifen können und die folgenden Ergebnisse erhalten:

Wie wir in der vorherigen Ausgabe sehen können, hat das Bild links alle richtigen Farben, während das Bild rechts die umgekehrten Farben hat und in ein anderes Bild umgewandelt wurde.

Beispiel 2: Verwenden der Filtereigenschaft mit der SEPIA -Funktion, um ein Bild in einer HTML -Datei zu stylen

In diesem Beispiel verwenden wir die SEPIA -Funktion der Filtereigenschaft, um alle Farben in einem Bild in eine warme braune oder hellgelbe Farbe zu ändern. Die SEPIA -Funktion akzeptiert alle positiven Farbumwandlungsgradwerte und lehnt nur die negativen Werte ab. Diese Filtereigenschaftsfunktion hat die Fähigkeit, die Farbe eines Bildes selbst zu ändern. In dem Stil -Tag einer HTML -Datei erstellen wir eine eindeutige Styling -Klasse für das Bildelement.

In diesem Skript greifen wir zunächst auf den Header der Datei zu, um eine Stilklasse für das Bildelement der HTML -Seite zu erstellen. In dem Style -Tag erstellen wir eine Klasse, in der wir die Eigenschaft sowie ihre Methode definieren, die die Farbe des Bildes verändert. Das Style -Tag und der Header der Datei werden anschließend geschlossen. Anschließend öffnen wir das Body -Tag und fügen eine Überschrift mit dem "H2" -Tag ein. Wenn wir dann das IMG -Element verwenden, platzieren wir die beiden Bilder auf unserem Bildschirm. Das erste Bild ist das ursprüngliche Farbbild ohne Stilmerkmale, während das zweite Bild das gleiche wie das erste ist, aber mit der Styling -Klasse in seinem Tag enthalten. Mit dem Schlüsselwort „SRC“ geben wir die Fotos über den Dateipfad in die Datei ein.

Wie in der vorherigen Ausgabe gezeigt, hat das Bild links alle richtigen Farben. Der rechts hat jedoch die verschiedenen Farben.

Beispiel 3: Verwenden der Filtereigenschaft mit der Graustufenfunktion, um ein Bild in einer HTML -Datei zu stylen

In diesem Beispiel werden wir die Graustufenfilterfunktion verwenden, um alle Farben auf einem Foto in Schwarz, Weiß und Grau umzuwandeln. Diese Filtereigenschaftsfunktion kann die Farbe eines Fotos verändern und sie in ein Graustufenbild verwandeln. Wir werden eine einzigartige Styling -Klasse für das Bildelement im Stil Tag einer HTML -Datei entwickeln.

In diesem Skript geben wir zunächst den Header der Datei ein, um eine Stilklasse für das Bildelement der HTML -Seite zu generieren. Wir definieren die Eigenschaft sowie die Methode, um die Farbe des Bildes in einer Klasse zu verändern. Das Style -Tag und der Header der Datei werden anschließend geschlossen. Anschließend öffnen wir das Körper -Tag und fügen eine Überschrift mit dem Tag "H2" ein. Dann verwenden wir das IMG -Element, um die beiden Bilder auf unserem Bildschirm anzuzeigen. Das erste Bild hat keine Styling -Funktionen, während das zweite Bild das gleiche wie das erste ist, aber mit der Styling -Klasse, die seinem Tag hinzugefügt wurde. Wir geben die Fotos mit dem Schlüsselwort "SRC" und dem Dateipfad in die Datei ein.

Das Bild links enthält alle Originalfarben, wie in der vorherigen Ausgabe gezeigt. Der rechts hat jedoch unterschiedliche Farbtöne.

Beispiel 4: Verwenden Sie die Filtereigenschaft mit der Deckkraft und Drop Shadow -Funktionen, um ein Bild in einer HTML -Datei zu stylen

In diesem Beispiel werden wir die Deckkraft der Filtereigenschaften verwenden und Schattenfunktionen fallen, um alle Farben auf einem Foto zu ändern. Diese Filtereigenschaftsfunktion verändert die Farbe eines Fotos und wandelt sie in ein neues Bild um.

In diesem Skript fügen wir zunächst den Header der Datei hinzu, um eine Stilklasse für das Bildelement auf der HTML -Seite zu erstellen. Wir definieren die Eigenschaft sowie die Methode, um die Farbe des Bildes in einer Klasse zu verändern. Das Style -Tag und der Header der Datei werden anschließend geschlossen. Dann öffnen wir das Body -Tag und verwenden das „H2“ -Tag, um eine Überschrift einzulegen. Das IMG -Element wird dann verwendet, um die beiden Bilder auf unserem Bildschirm anzuzeigen. Das erste Bild hat keine Styling -Eigenschaften, während das zweite Bild mit dem ersten identisch ist, aber mit der Styling -Klasse zu seinem Tag hinzugefügt wurde. Wir geben Bilder in die Datei ein, indem wir das Schlüsselwort "SRC" und den Dateipfad verwenden. Wir schließen den Körper und die HTML -Elemente, sobald wir das Bild -Tag schließen.

Das Foto links enthält alle Originalfarben, während das rechts die Töne geändert hat, wie in der vorherigen Ausgabe angegeben.

Abschluss

Wir haben die verschiedenen Methoden über die Änderung der Farbe eines Bildes in einer HTML -Datei mit CSS besprochen. Die am häufigsten verwendete CSS -Eigenschaft ist die Filtereigenschaft, die bestimmte Funktionen vordefiniert hat, die die Farbe eines Bildes ändern und ihr ein transformiertes Erscheinungsbild verleihen können. Wir haben mehrere dieser Funktionen in der Notepad ++ -Enumgebung implementiert, um ein besseres Verständnis dafür zu erhalten, wie diese Eigenschaft mit unterschiedlichen Funktionen funktioniert.