C'è un modo per colorare un'immagine PNG bianca solo con i CSS?

Question

So che ci sono molti filtri CSS in particolare per il webkit, ma non riesco a trovare una soluzione per colorare un'immagine bianca (#FFFFFF). Ho provato qualche combinazione dei filtri, ma nessuno di essi ha reso la mia immagine colorata. Posso solo cambiare l'immagine nell'intervallo di scala di grigi o seppia.

Quindi la mia domanda è: C'è un modo per cambiare il mio png totalmente bianco (per esempio) rosso usando solo css?

Come mostrato in questa immagine:

Answer 1

Questo può essere fatto con i CSS mascheramento, anche se purtroppo il supporto del browser è davvero male (credo WebKit solo).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere); 

Perché l'immagine è tutto bianco, è un candidato perfetto per il mascheramento. Il modo in cui la maschera funziona è che ovunque l'immagine sia bianca, l'elemento originale viene mostrato come normale, dove nero (o trasparente) l'elemento originale non viene mostrato. Qualunque cosa nel mezzo ha un certo livello di trasparenza.

EDIT:

Si può anche arrivare a questo lavoro in Firefox con l'aiuto di lieve svg.

http://jsfiddle.net/uw1mu81k/4/

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    mask: url(#mymask); 
 
    -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png); 
 
}

<div style="background-color: red;"></div> 
 
<div style="background-color: blue;"></div> 
 
<div style="background-color: green;"></div> 
 
<div style="background-color: orange;"></div> 
 
<div style="background-color: purple;"></div> 
 

 
<svg height="0" width="0"> 
 
    <mask id="mymask"> 
 
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" /> 
 
    </mask> 
 
</svg>

Answer 2

Questo può essere fatto con un filtro CSS che fa riferimento a un filtro SVG (browser WebKit + firefox). Ecco il filtro SVG.

<svg width="800px" height="600px"> 
    <filter id="redden"> 
    <feColorMatrix type="matrix" values="1 1 1 0 0 
             0 0 0 0 0 
             0 0 0 0 0 
             0 0 0 1 0"/> 
    </filter> 

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice" xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/> 
</svg> 

Answer 3

Recentemente ho la stessa domanda e penso che questo approccio valga la pena di essere condiviso per i futuri lettori. Prova questo

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg); 

luminosità si scurisce l'immagine, seppia renderà un po 'giallastro, di saturare per aumentare il colore, ed infine tonalità rotazione per cambiare il colore. Non è cross browser cordiale anche se:

• Non è supportato su IE

• su Chrome, hue-rotate(25deg) farà qualsiasi immagine rosso, ma è necessario valore negativo in Firefox per esempio hue-rotate(-25deg) per renderlo rosso.
  È possibile utilizzare questo per indirizzare i browser Mozilla: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

Ecco alcuni consigli utili e gli strumenti che ho usato quando lavoro con immagini/icone usando i CSS:

• Se si dispone di la versione svg dell'immagine, è possibile convertirli in icone font utilizzando questo strumento https://icomoon.io/. Per cambiare colore hai solo bisogno di color:#f00; proprio come i colori dei caratteri.
• Se è necessario ottenere questo effetto per lo stato al passaggio del mouse, utilizzare l'immagine rossa con filter: brightness(0) invert(); sullo stato NON al passaggio del mouse e filter: brightness(1); sullo stato al passaggio del mouse. Tuttavia, ciò non funzionerà ancora su IE
• Usa foglio sprite. Puoi creare te stesso usando lo strumento di modifica delle immagini o utilizzare i generatori di fogli di sprite disponibili online. Quindi, puoi usare SpriteCow per ottenere il css per ogni immagine secondaria del tuo sprite.