Wie ändert man die Farbe eines Bildes mit CSS3?

Question

Ich möchte die Farbe eines Bildes von Grau zu Grün/Rot/Gelb mit CSS3 ändern. Ich habe versucht mit unten Code, aber es funktioniert nicht.

img { 
    -webkit-filter: blue(100%); 
    filter: blue(100%); 
} 

Answer 1

Derzeit CSS filter unterstützt folgende Filter-Funktionen,

/* <filter-function> values */ 
filter: blur(5px); 
filter: brightness(0.4); 
filter: contrast(200%); 
filter: drop-shadow(16px 16px 20px blue); 
filter: grayscale(50%); 
filter: hue-rotate(90deg); 
filter: invert(75%); 
filter: opacity(25%); 
filter: saturate(30%); 
filter: sepia(60%); 

/* URL to SVG filter */ 
filter: url("filters.svg#filter-id"); 

Sie können mit filter: url() versuchen, aber ich bin nicht sicher.

Answer 2

Eine Reihe von möglichen Lösungen, um dies zu erreichen.

A: Verwendung CSS Blend Modes. Es gibt eine ziemlich einfache Anleitung über CSS Tricks über sie. Für die Farbe grün, würden Sie einfach tun:

.image-green { 
    background-image: url(image.jpg); 
    background-color: green; 
    background-blend-mode: multiply; 
} 

Und wiederholen Sie das für Ihre anderen Farben der Wahl. Example

B: Wenn Sie auf die Idee fixiert sind filter zu verwenden, dann müssen Sie filter: hue-rotate verwenden, das zu erreichen. Es braucht ein gewisses Maß Wert wie folgt aus:

.blue { 
    -webkit-filter: hue-rotate(180deg); 
    filter: hue-rotate(180deg); 
} 

Example fiddle

C: Dies ist eher ein Overlay, aber es funktioniert gut für Graustufenbilder. Sie können ein Pseudo-Element-Overlay festlegen und es mit einem einfachen background-color Attribut beliebig einfärben! Schauen Sie sich ein example

.img-wrapper { 
    position: relative; 
} 

.img-wrapper::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(50, 200, 50, 0.4); 
} 

Answer 3

Sie eine Funktion zur Zeit zu den modernen Browsern hinzugefügt können Sie die Farbe des Bildes heißt filter (-web-filter for chrome and safari) ändern. Aber das Hauptproblem ist, dass Sie sich in Ihrer Frage über das Ändern der Farbe erkundigt haben, aber ich denke, dass es nur als Filter gilt, wie der Name schon sagt. Es wird derzeit von allen modernen Browsern unterstützt, so dass wir diese Funktion auf Fly verwenden können. Sie kann Ihnen in vielen Situationen helfen und kann eine Alternative zu vielen ui-Designs sein. Um dies besser zu verstehen, können Sie diesen Code-Link aufrufen. https://codepen.io/Deep_Purple/pen/gGXvMR