100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)

Vorwort

„Wenn es um Bildbearbeitung geht, denken wir oft an Bildbearbeitungstools wie Photoshop. Als Frontend-Entwickler müssen wir oft einige Spezialeffekte verarbeiten, beispielsweise Symbole je nach Zustand in unterschiedlichen Farben anzeigen lassen. Oder beim Schweben müssen wir den Kontrast und den Schatten des Bildes verarbeiten.“

Glauben Sie, dass diese von der PS-Software verarbeitet werden? Nein, nein, nein, es ist rein in CSS geschrieben, es ist magisch.

Leistungsstarker CSS:Filter

CSS-Filter bieten grafische Effekte wie das Verwischen, Schärfen oder Ändern der Farbe eines Elements. Filter werden häufig verwendet, um die Darstellung von Bildern, Hintergründen und Rändern anzupassen. MDN

Der CSS-Standard beinhaltet einige Funktionen, die vordefinierte Effekte implementieren.

Filter: keine        
    | Unschärfe() 
    | Helligkeit() 
    | Kontrast() 
    | Schlagschatten() 
    | Graustufen() 
    | Farbton-rotieren() 
    | invertieren() 
    | Opazität() 
    | sättigen() 
    | sepia() 
    | URL(); 

Filter: keine

Keine Auswirkung, der Standardfilter ist keiner

filter:blur() Gaußscher Weichzeichner

Verleihen Sie dem Bild einen Gaußschen Weichzeichnereffekt. Je größer der Längenwert, desto unschärfer das Bild.

Versuchen wir es

img 
{    
Filter: Unschärfe (2px);
} 

Helligkeit (%) lineare Multiplikation

Kann das Bild heller oder dunkler erscheinen lassen

img {
Filter: Helligkeit (70 %);
} 

Kontrast(%)

Passt den Kontrast des Bildes an.

img 
{    
Filter: Kontrast (50 %);
} 

Schlagschatten (H-Schatten, V-Schatten, Unschärfe, Ausbreitungsfarbe)

Legen Sie einen Schatteneffekt für das Bild fest. Schatten werden unter dem Bild zusammengesetzt, können unscharf gemacht werden und sind versetzte Versionen einer Maske, die in einer bestimmten Farbe gemalt werden kann. Die Funktion akzeptiert Werte vom Typ <shadow> (definiert im CSS3-Hintergrund), außer dass das Schlüsselwort „inset“ nicht zulässig ist. Diese Funktion ist der vorhandenen Box-Shadow-Eigenschaft sehr ähnlich. Der Unterschied besteht darin, dass einige Browser durch den Filter eine Hardwarebeschleunigung für eine bessere Leistung bereitstellen.

Mit dieser Lösung ändern wir tatsächlich die Farbe einiger Symbole, beispielsweise indem wir ein schwarzes Symbol in ein blaues Symbol ändern.

CSS-Technologie zur beliebigen Farbgebung für kleine Symbole im PNG-Format

img 
{    
Filter: Schlagschatten (705px 0 0 #ccc);
}

Dabei projizieren wir das Bild so, dass eine gleich große Graufläche entsteht.

Farbton-Drehung (Grad) Farbtondrehung

img {    
Filter: Farbton-Drehung (70 Grad);
}

Schau, meine kleine Schwester ist ein Avatar geworden!

invertieren(%) invertieren

Mit dieser Funktion wird das Eingabebild invertiert, was ein wenig dem Effekt einer Belichtung ähnelt.

img 
{   
 Filter: invertieren (100 %)
} 

Graustufen(%) Wandelt das Bild in Graustufen um

Dieser Effekt kann dazu führen, dass das Bild alt aussieht und die Wechselfälle der Zeit aufzeigt. Menschen, die den antiken Stil mögen, werden diesen Effekt auf jeden Fall mögen

img 
{    
Filter: Graustufen (80 %);
} 

Neben dem antiken Stil gibt es noch einen weiteren Einsatzzweck, bei dem Sie die gesamte Site grau färben müssen, beispielsweise am Holocaust-Gedenktag.

Sie können es so einstellen

*{    
Filter: Graustufen (100 %);   
 -Webkit-Filter: Graustufen (100 %);   
 -moz-filter: Graustufen (100 %);    
-ms-filter: Graustufen (100 %);   
 -o-Filter: Graustufen (100 %);
}

sepia(%) Wandelt das Bild in Sepia um

Geben Sie meiner kleinen Schwester unten einen warmen Ton.

img 
{   
 Filter: Sepia (50 %)
} 

Ist Ihnen aufgefallen, dass ich die Methode url() hier nicht geschrieben habe?

Ja, da ich diesen Inhalt am Ende einfügen möchte, ist filter:url() die ultimative Möglichkeit, Bilder mit CSS-Filtern zu ändern. CSS:filter kann einen SVG-Filter als eigenen Filter importieren.

Die ultimative Farbwechsellösung! filter:url();

Warum ist filter:url() die ultimative Lösung zum Ändern der Farbe von Bildern? Lassen Sie mich das bitte kurz erklären.

Werfen wir zunächst einen Blick auf das Funktionsprinzip von PS. Wir alle wissen, dass Webseiten drei Grundfarben haben: R (Rot), G (Grün) und B (Blau). Das allgemeine RGBA enthält auch einen Opazitätswert, und der Opazitätswert wird basierend auf dem Alphakanal berechnet. Das heißt, jedes Pixel, das wir auf einer Webseite sehen, besteht aus vier Kanälen: Rot, Blau, Grün und Alpha. Jeder Kanal wird als Farbpalette bezeichnet. Die 8-Bit-Palette in PS bedeutet 2 hoch 8 von 256, was bedeutet, dass der Wertebereich jedes Kanals (0-255) beträgt – SVG Research Road (11) – Filter: feColorMatrix

Wenn wir den Wert jedes Kanals ändern können, können wir dann jede gewünschte Farbe erhalten? Im Prinzip können wir SVG-Filter wie PS verwenden, um jedes gewünschte Bild zu erhalten, nicht nur eine Farbänderung. Wir können sogar aus dem Nichts ein Bild erzeugen.

svg feColorMatrix ist großartig

<svg Höhe="0" xmlns="http://www.w3.org/2000/svg">  
  <Definitionen>        
<filter id="ändern">               
 <feColorMatrix Typ="Matrix" Werte="               
 0 0 0 0 0,55               
 0 0 0 0 0,23                
 0 0 0 0 0                
 0 0 0 0 1" />     
   </filter>   
 </defs></svg>
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
img
 {   
 filter:url(#ändern);}

Durch einen einzigen Kanal können wir das Bild in eine einzige Farbe umwandeln

<svg Höhe="0" xmlns="http://www.w3.org/2000/svg">    
<Definitionen>       
 <filter id="ändern">               
<feColorMatrix-Werte="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter>    
</defs>
</svg>

Durch Dualkanäle können wir einige sehr coole PS-Effekte erzielen

Natürlich handelt es sich hier nur um ein Beispiel. Indem wir die Werte in der Matrix konfigurieren, können wir den Wert jedes Pixels so konfigurieren, dass er gemäß den von uns definierten Regeln angezeigt wird.

Hier erklären wir im Detail, wie die feColorMatrix-Matrix berechnet wird.

Unter ihnen Rin Gi

n Bin a(alpha) ist der RGB-Wert jedes Pixels im Originalbild

Der durch Matrixberechnung erhaltene Rout Gout Bout Aout ist der endgültig angezeigte RGBA-Wert.

Wandeln Sie das Bild in Monochrom um. Nehmen Sie als Beispiel braun rgba(140,59,0,1).

Mit der obigen Formel können wir einige Berechnungen vereinfachen. In derselben Zeile wird nur ein Kanalwert festgelegt und die anderen Kanäle sind 0.

Es ist nicht schwer, die Matrix abzuleiten

0 0 0 0 Zielwert R0 0 0 0 Zielwert G0 0 0 0 Zielwert B0 0 0 0 1

Gemäß den Regeln müssen wir nur berechnen: 255/die Farbe, die dem Kanal entspricht, den wir anzeigen möchten = der Zielwert

Die gewünschte braune Farbe, rgba (140,59,0,1), wird in die Farbpalette rgba als 140 59 0 255 umgewandelt.

Der Zielwert kann berechnet werden

0 0 0 0,550 0 0 0,230 0 0 0 0 0 0 0 0 1

Mehrkanaleinstellungen für coole Effekte

Genau wie die coolen Bilder, die durch die Dualkanäle erzeugt werden, die wir zuvor gesehen haben

Heute möchten wir die Sättigung des Bildes erhöhen. Wie sollen wir dabei vorgehen? Zunächst sollten wir über die Ursache der Sättigung nachdenken, dh der Red therot, das Blau und desto grün ist, dass unsere Matrix auf der Matrix, in der das Prinzip ist, in der Matrix, in der die RGB ist, und das Prinzip, das von 2005), um das Prinzip (2005) (2000) (200) (200) (200). (50/255), und es sollte nach der Matrixumwandlung ein bisschen dunkel orange erscheinen. × 0,2, 50x-0,5. SVG Research Road (11) – filter:feColorMatrix

<svg Höhe="0" xmlns="http://www.w3.org/2000/svg">    
<Definitionen>       
 <filter id="ändern">             
  <feColorMatrix-Werte="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0           
            0 0 0 1 0" />       
 </filter>    
</defs>
</svg>

Andere Lösungen

Neben dem feColorMatrix-SVG-Filter gibt es noch viele weitere Möglichkeiten Filter zu definieren, die auch auf Bilder angewendet werden können. Aus Platzgründen werde ich hier nicht näher darauf eingehen.

Zusammenfassung: CSS3 bietet das Filterattribut, mit dem sich durch Front-End-Technologie noch mehr coole Spezialeffekte erzielen lassen. Mithilfe von SVG-Filtern können wir komplexe Filtereffekte erzielen. Beachten Sie, dass CSS: Filter und IE-Filter nicht dasselbe Konzept sind. CSS: Filter ist in verschiedenen Browsern unterschiedlich kompatibel. Sie müssen bei der Verwendung auf die Browserkompatibilität achten.

Zusammenfassen

Oben habe ich Ihnen 100 Möglichkeiten vorgestellt, die Farbe von Bildern mit CSS zu ändern. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!