Bildfarbe ändern in CSS

1. Verwenden Sie die Eigenschaft filter, um die Bildfarbe in CSS zu ändern
2. Verwenden Sie die Funktionen opacity() und drop-shadow() in der Eigenschaft filter, um die Bildfarbe in CSS zu ändern

In diesem Artikel werden einige Methoden zum Ändern der Bildfarbe in CSS vorgestellt.

Verwenden Sie die Eigenschaft filter, um die Bildfarbe in CSS zu ändern

Die Eigenschaft filter legt die Überlagerung eines Bildes in CSS fest.

Mit der Eigenschaft filter können wir visuelle und grafische Effekte in einem Bild anwenden. Mit der Eigenschaft filter können wir zum Beispiel ein Bild verwischen, Kontrast und Helligkeit ändern, Schatteneffekt, Sättigung, Graustufen und Deckkraft anwenden.

Es gibt verschiedene Optionen, die wir mit der Eigenschaft filter auf die Bilder anwenden können. Die Syntax der Eigenschaft filter ist unten dargestellt.

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

Wir können die %-Werte verwenden, um die obigen Optionen einzustellen. Der niedrigere Wert hat weniger Auswirkungen auf das Bild und umgekehrt.

Anstelle des Prozentwerts können wir auch den Dezimalwert verwenden. Zum Beispiel können wir 0.8 für 80% schreiben.

Sehen wir uns nun die Beispiele der verschiedenen Filter an.

Fügen Sie beispielsweise ein Bild mit der URL https://loremflickr.com/320/240 sechsmal mit dem img-Tag ein und setzen Sie die Klassen brightness, blur, saturate, grayscale und contrast zum img-Tag, wie im Beispiel unten gezeigt. Wählen Sie in CSS das Tag img aus und setzen Sie width auf 25% und die Eigenschaft float auf left.

Als nächstes wählen Sie die Klasse brightness und stellen mit der Eigenschaft filter die Helligkeit auf 1.25. Wählen Sie entsprechend die entsprechenden Klassen aus und stellen Sie je nach Klasse blur auf 2px, saturate auf 300%, grayscale auf 200% und contrast auf 60%.

Hier ist das erste Bild das Originalbild und der Rest enthält die Filter. So können wir die Eigenschaft filter verwenden, um die Bildfarbe in CSS zu ändern.

Beispielcode:

<img src="/img/DelftStack/logo.png" />
<img class="brightness" src="/img/DelftStack/logo.png" />
<img class="blur" src="/img/DelftStack/logo.png" />
<img class="saturate" src="/img/DelftStack/logo.png" />
<img class="grayscale" src="/img/DelftStack/logo.png" />
<img class="contrast" src="/img/DelftStack/logo.png" />

img {
 width:25%;
 float:left;  
}

.brightness { filter: brightness(1.25); }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.grayscale { filter: grayscale(200%); }
.contrast { filter: contrast(60%); }

Verwenden Sie die Funktionen opacity() und drop-shadow() in der Eigenschaft filter, um die Bildfarbe in CSS zu ändern

Wir können die Bildfarbe in CSS ändern, indem wir die Funktionen opacity() und drop-shadow() in der Eigenschaft filter kombinieren. Wir können die Farbe des Schattens über die Funktion drop-shadow() liefern und den Schatten so dünn wie möglich einstellen, damit sich die Farbe des Bildes nur ändert, ohne einen tatsächlichen Schatten zu bilden.

Die Deckkraft verleiht dem Bild eine sichtbarere Farbe. Mit der Funktion drop-shadow können wir den horizontalen Schatten, den vertikalen Schatten, den Unschärferadius, den Streuwert und die Farbe festlegen.

Fügen Sie beispielsweise ein HTML-Bild ein, wählen Sie in CSS das Tag img aus und wenden Sie die Eigenschaft filter darauf an. Stellen Sie in der Eigenschaft filter die opacity auf 0.4. Als Parameter der Funktion drop-shadow den Wert 0 0 0 red einstellen.

Hier setzen wir den Wert 0 für die horizontalen und vertikalen Schatten. Dadurch liegt direkt hinter dem Bild ein Schatten.

Der Wert 0 der Unschärfe macht das Bild auch am Rand schärfer. Allerdings wird die Farbe rot auf den Schatten aufgetragen und das Bild wird rötlich.

Auf diese Weise können wir die Funktionen opacity() und drop-shadow() in der Eigenschaft filter kombinieren, um die Bildfarbe in CSS zu ändern.

Beispielcode:

<img src="/img/DelftStack/logo.png" />

img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}