it-swarm.it

Cambia il colore dell'immagine PNG tramite CSS?

Dato un PNG trasparente che mostra una semplice forma in bianco, è possibile in qualche modo cambiare il colore di questo attraverso i CSS? Qualche tipo di sovrapposizione o cosa no?

374
Wesley

Puoi utilizzare i filtri con -webkit-filter e filter: i filtri sono molto nuovi per i browser e sono supportati solo in browser molto moderni. Puoi cambiare un'immagine in scala di grigi, seppia e molto altro (guarda l'esempio).

Quindi ora puoi cambiare il colore di un file PNG con i filtri.

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">

Fonte

477
РАВИ

Potresti dare un'occhiata ai font Icon. http://css-tricks.com/examples/IconFont/

EDIT: sto usando Font-Awesome sul mio ultimo progetto. Puoi persino riavviarlo. Metti semplicemente questo nel tuo <head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

E poi vai avanti e aggiungi alcuni link di icone come questo:

<a class="icon-thumbs-up"></a>

Ecco il foglio completo

--modificare--

Font-Awesome utilizza diversi nomi di classi nella nuova versione, probabilmente perché questo rende drasticamente più piccoli i file CSS e per evitare ambigue classi di CSS. Quindi ora dovresti usare:

<a class="fa fa-thumbs-up"></a>

MODIFICA 2:

Appena scoperto, github utilizza anche il proprio carattere di icona: Octicons È gratuito da scaricare. Hanno anche alcuni suggerimenti su come creare i propri font di icone .

55
Jules Colle

Ho trovato questo ottimo esempio di codepen che inserisci il tuo hex color value e restituisce il filtro necessario per applicare questo colore a png

Generatore di filtri CSS per convertire da nero a colore esadecimale target

per esempio avevo bisogno del mio png per avere il seguente colore # 1a9790

quindi devi applicare il seguente filtro a png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
28
Fadi Abo Msalam

Il tag img ha una proprietà di background come qualsiasi altra. Se hai un PNG bianco con una forma trasparente, come uno stencil, puoi farlo:

<img src= 'stencil.png' style= 'background-color: red'>
26
Kirill G

Sono stato in grado di farlo usando il filtro SVG. È possibile scrivere un filtro che moltiplica il colore dell'immagine sorgente con il colore che si desidera modificare. Nel frammento di codice sottostante, flood-color è il colore in cui vogliamo cambiare il colore dell'immagine (che in questo caso è rosso). FeComposite dice al filtro come elaboriamo il colore. La formula per feComposite con aritmetica è (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) dove i1 e i2 sono colori di input per in/in2 di conseguenza. Quindi, specificare solo k1 = 1 significa che farà solo i1 * i2, il che significa moltiplicare insieme i due colori di input.

Nota: funziona solo con HTML5 poiché utilizza SVG in linea. Ma penso che potresti essere in grado di farlo funzionare con un browser più vecchio mettendo SVG in un file separato. Non ho ancora provato questo approccio.

Ecco il frammento:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>
23

Sì :)

Surfin 'Safari - Blog Archive »Maschere CSS

WebKit ora supporta le maschere alfa nei CSS. Le maschere ti consentono di sovrapporre il contenuto di una scatola con un motivo che può essere utilizzato per mettere fuori gioco parti di quella casella nella visualizzazione finale. In altre parole, è possibile ritagliare su forme complesse basate sull'alpha di un'immagine.
[...]
Abbiamo introdotto nuove proprietà per fornire ai progettisti Web un ampio controllo su queste maschere e su come vengono applicate. Le nuove proprietà sono analoghe alle proprietà background e border-image che esistono già.

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-Origin (background-Origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)
20
benhowdle89

In la maggior parte dei browser , puoi usare i filtri:

  • su entrambi gli elementi <img> e le immagini di sfondo di altri elementi

  • e impostale staticamente nel tuo CSS o in modo dinamico usando JavaScript

Guarda le demo qui sotto.


elementi <img>

Puoi applicare questa tecnica ad un elemento <img>:

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

Immagini di sfondo

Puoi applicare questa tecnica a un'immagine di sfondo:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<div id="original"></div>

<div id="changed"></div>

JavaScript

È possibile utilizzare JavaScript per impostare un filtro in fase di runtime:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

<div id="changed"></div>
15
John Slegers

Credo di avere una soluzione per questo che è a) esattamente quello che stavi cercando 5 anni fa, eb) è un po 'più semplice delle altre opzioni di codice qui.

Con qualsiasi png bianco (ad es. Icona bianca su sfondo trasparente), è possibile aggiungere un selettore :: after per ricolorare.

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

Vedi questa codepen (applicando lo scambio di colori su hover): http://codepen.io/chrscblls/pen/bwAXZO

14
chrscblls

Ho richiesto un colore specifico, quindi il filtro non ha funzionato per me.

Invece, ho creato un div, sfruttando le multiple immagini di sfondo CSS e la funzione di sfumatura lineare (che crea un'immagine stessa). Se si utilizza la modalità di fusione sovrapposizione, l'immagine effettiva verrà miscelata con l'immagine "gradiente" generata contenente il colore desiderato (qui, # BADA55)

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }
<div class="colored-image"></div>
7
pyre

Ho trovato questo mentre su Google, ho trovato il miglior lavoro per me ...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

5

La più semplice linea che ha funzionato per me:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Puoi regolare l'opacità da 0 a 1 per rendere il colore più chiaro o più scuro.

3
Rehmat

Non è necessario un intero set di caratteri se è necessaria una sola icona, inoltre ritengo che sia più "pulito" come un singolo elemento. Quindi, per questo scopo, in HTML5 puoi posizionare un file SVG direttamente nel flusso del documento. Quindi puoi definire una classe nel tuo foglio di stile .CSS e accedere al suo colore di sfondo con la proprietà fill:

Working fiddle: http://jsfiddle.net/qmsj0ez1/

Nota che, nell'esempio, ho usato :hover per illustrare il comportamento; se vuoi semplicemente cambiare colore per lo stato "normale", devi rimuovere lo pseudoclass.

3
Pere

Risposta perché stavo cercando una soluzione per questo.

la penna nella risposta @chrscblls funziona bene se hai uno sfondo bianco o nero, ma il mio no. Inoltre, le immagini sono state generate con ng-repeat, quindi non ho potuto avere il loro URL nel mio css E non puoi usare :: after on img tags.

Così, ho pensato a un lavoro in giro e ho pensato che potrebbe aiutare le persone se anche loro inciamperanno qui.

Quindi quello che ho fatto è praticamente lo stesso con tre differenze principali:

  • l'url è nel mio tag img, l'ho messo (e un'etichetta) in un altro div in cui: after funzionerà.
  • il 'mix-blend-mode' è impostato su 'difference' invece di 'multiply' o 'screen'.
  • Ho aggiunto un :: before con esattamente lo stesso valore in modo che il :: after faccia la 'differenza' della 'differenza' fatta da :: before e cancellato-self.

Per cambiarlo dal nero al bianco o dal bianco al nero, il colore dello sfondo deve essere bianco. Dal nero ai colori, puoi scegliere qualsiasi colore. Dal bianco ai colori, dovrai scegliere il colore opposto a quello che desideri.

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

3
Salix

Per cambiare letteralmente il colore, potresti incorporare una transizione CSS con un filtro -webkit dove, quando succede qualcosa, invocherai il filtro -webkit di tua scelta. Per esempio:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }
0
beta208