Hier sind die Ergebnisse dieses Artikels:
Lasst uns beginnen!
Ändern Sie die Bildfarbe in CSS
Um die Farbe des Bildes in CSS zu ändern, lernen Sie zunächst die filter-Eigenschaft und ihre Funktionen kennen. Auf diese Weise erhalten Sie ein besseres Verständnis.
CSS-Eigenschaft filtern
Zur Steuerung des visuellen Effekts wird eine Bildfiltereigenschaft von CSS verwendet. Visuelle Effekte sind:
- verwischen
- Helligkeit
- Farbanpassung
- Schlagschatten
- Opazität
Syntax der filter-Eigenschaft
Die Syntax der Filtereigenschaft lautet:
Filter : verwischen ( ) | Schlagschatten ( ) | Opazität ( )- verwischen(): Wird verwendet, um einen Unschärfeeffekt auf das Bild anzuwenden.
- Schlagschatten(): Erstellen Sie einen Schatten über einem Bild.
- Opazität(): Wird verwendet, um dem Bild Transparenz hinzuzufügen.
Mit dieser Filtereigenschaft können wir mehrere Filter verwenden. In diesem Artikel geht es darum, wie man die Farbe des Bildes ändert, also erklären wir hier, wie man die Funktionen drop-shadow() und opacity() damit verwendet.
Schlagschatten ()
drop-shadow() ist eine eingebaute CSS-Funktion, 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 damit vertikal hinzugefügt.
- Farbe: Schatten werden mit diesem Parameter eingefärbt.
Um diese Punkte zu verdeutlichen, gehen wir zur Syntax von drop-shadow über:
Schlagschatten ( offset-x offset-y Farbe )- offset-x und offset-y können positiv oder negativ sein.
- In der Horizontalen wird ein positiver Wert verwendet, um die Effekte auf der rechten Seite hinzuzufügen, und ein negativer Wert wird für die linke Seite verwendet.
- In der Vertikalen steht der positive Wert für die Unterseite und der negative für die Oberseite.
- Anstelle von Farbe können Sie dem Bild eine beliebige Farbe zuweisen.
Opazität()
opacity() wird verwendet, um einem Element oder einem beliebigen Bild Transparenz hinzuzufügen. Die Syntax von opacity() lautet:
Opazität ( Nummer ) ;Hier „ Nummer ” ich s wird verwendet, um die Deckkraft zwischen 0,0 und 1,0 einzustellen. Um ein Bild vollständig transparent zu machen, können Sie es auf 0,0 setzen.
Um die oben genannten Punkte zu verdeutlichen, gehen wir zum Beispiel über.
Wie ändere ich die Bildfarbe in CSS?
Im folgenden Beispiel fügen wir zuerst ein Bild mit dem Tag hinzu:
< Bild Klasse = 'Bild' Quelle = 'Bild.jpg' alles = '' >
< / Karosserie >
Vor dem Anwenden der Filtereigenschaft war das Ergebnis wie folgt:
Um die Farbe eines Bildes zu ändern, wechseln wir zum CSS und wenden die Filtereigenschaft darauf an. Wir werden die Deckkraft für die Transparenz des Bildes auf 0,5 setzen. In der Funktion drop-shadow() ist der Wert von offset-x und offset-y 0, weil wir nur die Farbe eines Bildes ändern wollen.
.Bild {Filter : Opazität ( 0,5 ) Schlagschatten ( 0 0 braun ) ;
}
Hier das Endergebnis nach der Implementierung:
Die Farbe des Bildes wurde erfolgreich geändert.
Fazit
Um die Farbe eines Bildes zu ändern, werden zwei CSS-Funktionen verwendet: opacity() und drop-shadow() mit der filter-Eigenschaft. 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.