So ändern Sie die Bildfarbe in CSS

Die Kombination der Funktionen von Depacity () und Drop-Shadow () in der Filtereigenschaft ändert die Farbe eines Bildes in CSS. Die Filtereigenschaft kann verwendet werden, um verschiedene Effekte auf ein Bild anzuwenden, z. B. Reflexionen, Graustufen, Sepia, Schatten und mehr. Diese Funktionen verwenden unterschiedliche Farbkomponenten, um die Farbe des Bildes zu ändern. In diesem Handbuch erwerben Sie Kenntnisse darüber, wie CSS verwendet werden, um die Farbe eines Bildes zu ändern.

Hier sind die Ergebnisse dieses Artikels:

• Filtereigenschaft
• Drop-Shadow ()
• Opazität()

Lasst uns beginnen!

Ändern Sie die Bildfarbe in CSS

Um die Farbe des Bildes in CSS zu ändern, erfahren Sie zunächst die Filtereigenschaft und ihre Funktionen. Sie werden auf diese Weise ein besseres Verständnis erlangen.

Filter CSS -Eigenschaft

Um den visuellen Effekt einer Bildfiltereigenschaft von CSS zu steuern, wird verwendet. Visuelle Effekte sind:

• verwischen
• Helligkeit
• Farbanpassung
• Drop-Shadow
• Opazität

Syntax der Filtereigenschaft

Die Syntax der Filtereigenschaft lautet:

Filter: Blur () | Drop-shadow () | Opazität()

• verwischen(): Wird verwendet, um einen Unschärfeeffekt auf das Bild anzuwenden.
• Drop-shadow (): Erstellen Sie einen Schatten über ein Bild.
• Opazität(): Wird verwendet, um dem Bild Transparenz zu verleihen.

Wir können mehrere Filter mit dieser Filtereigenschaft verwenden. In diesem Artikel geht es darum, wie man die Farbe des Bildes ändert. Hier werden wir hier erklären, wie man die Drop-Shadow () und die Opacity () -Funktion damit verwendet.

Drop-Shadow ()

Drop-shadow () ist eine integrierte Funktion von CSS, die es ermöglicht, Schatten auf jedes Element oder Bild zu setzen. Die folgenden Parameter werden in der Funktion Drop-Shadow () verwendet, um die Farbe eines Bildes zu ändern:

• Offset-X: Es wird verwendet, um horizontalen Schatten hinzuzufügen.
• Offset-y: Schatten werden diese vertikal hinzugefügt.
• Farbe: Schatten werden mit diesem Parameter gefärbt.

Um diese Punkte zu klären, wechseln wir zur Syntax von Drop-Shadow:

Drop-Shadow (Offset-X Offset-y Color)

• Offset-X und Offset-Y können positiv oder negativ sein.
• In horizontaler Wert wird ein positiver Wert verwendet, um die Effekte auf der rechten Seite hinzuzufügen, und negativ ist für die linke Seite.
• In vertikaler Wert ist der positive Wert für die untere Seite und das Negative für die Oberseite ist.
• An der Farbstelle können Sie jede Farbe zuweisen, die Sie dem Bild geben möchten.

Opazität()

Opacity () wird verwendet, um einem Element oder einem beliebigen Bild Transparenz hinzuzufügen. Die Syntax der Opazität () lautet:

Opazität (Nummer);

Hier “Nummer” ichs verwendet, um die Deckkraft zwischen 0 zu setzen.0 bis 1.0. Um ein Bild vollständig transparent zu machen, können Sie es als 0 festlegen.0.

Um die oben genannten Punkte zu verdeutlichen, wechseln wir zum Beispiel zum Beispiel.

So ändern Sie die Bildfarbe in CSS?

Im folgenden Beispiel werden wir zunächst ein Bild mit dem Tag hinzufügen:

Vor der Anwendung der Filtereigenschaft war das Ergebnis wie folgt:

Um die Farbe eines Bildes zu ändern, wechseln wir zum CSS und wenden Sie die Filtereigenschaft darauf an. Wir werden die Deckkraft auf 0 setzen.5 für die Transparenz des Bildes. In der Funktion Drop-Shadow () beträgt der Wert von Offset-X und Offset-y 0, da wir nur die Farbe eines Bildes ändern möchten.

.Bild
Filter: Deckkraft (0.5) Drop-Shadow (0 0 Brown);

Hier ist das Endergebnis nach der Implementierung:

Die Farbe des Bildes wurde erfolgreich verändert.

Abschluss

Um die Farbe eines Bildes zu ändern, werden zwei CSS-Funktionen: Opacity () und Drop-Shadow () mit der Filtereigenschaft verwendet. Opacity () gibt die Transparenz des Bildes an, und Drop-shadow () weist dem Bild Farbe und Schatten zu. In diesem Artikel wurde die Methode zum Ändern der Farbe eines Bildes mit CSS erläutert.