So ändern Sie die Bildfarbe mit CSS

So ändern Sie die Farbe eines Bildes mit CSS: 1. Verwenden Sie die Methode [mix-blend-mode], um den Wert zu erhalten. 2. Verwenden Sie den Mischmodus [background-blend-mode: lighten], um die Hauptfarbe zu ändern des Bildes von Schwarz zu anderen Farben.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So ändern Sie die Farbe von Bildern mit CSS:

1. Schauen wir uns zunächst den Wert von mix-blend-mode an

mix-blend-mode: normal; // Normal

mix -blend-mode: multiplizieren; // Multiplizieren

mix-blend-mode: screen; // Filter

mix-blend-mode: overlay; // Verdunkeln

Misch-Mischmodus: Aufhellen; // Aufhellen

Misch-Mischmodus: Farbveränderung; // Misch-Mischmodus: Farbvertiefung; Modus: Hartlicht; // Hartlicht

Mischmodus: Weiches Licht; // Weichlicht

Mischmodus: Differenz; / ausschließen

mix-blend-mode: hue; // hue

mix-blend-mode: saturation; // saturation

mix-blend-mode: color; // color

mix-blend-mode: luminosity ; //Helligkeit

mix-blend-mode: initial; //Inherit

mix-blend-mode: nicht festgelegt; //Restore

these Ungefähr das Gleiche wie in ps, mit Ausnahme der letzten drei

2. Mit dem Hintergrund-Mischmodus können wir eine zusätzliche Ebene mit anderen Farben unter dem Bild überlagern. Verwenden Sie den Hintergrund-Mischmodus: Aufhellen-Mischmodus, um die Hauptfarbe zu ändern das Bild für andere Farbzwecke schwarz. Der einfache CSS-Code lautet wie folgt:

.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}

Nach dem Login kopieren

Verwandte kostenlose Lernempfehlungen:

Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Bildfarbe mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!