Cambia il colore dell'immagine PNG tramite CSS?

465

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

— Wesley
fonte

4

È possibile impostare la background-colorproprietà CSS. Puoi creare una parte non trasparente che verrà riparata e una parte trasparente dell'immagine che verrà riempita con qualsiasi colore che ti piace tramite CSS. È quello che vuoi ottenere?

— jakub.g,

2

@qbk, questo vale una risposta, non solo un commento. E mi hai battuto di 1 secondo, tecnicamente.

— Kirill G,

2

Puoi usare psuedo-elements con un metodo di fusione per ricolorare qualsiasi icona che è 100% nero o 100% bianco (lo sfondo rimane trasparente). Vedi la mia risposta qui:

— stackoverflow.com/a/39796437/1472114

570

Puoi utilizzare i filtri con -webkit-filtere filter: I filtri sono relativamente nuovi per i browser ma supportati in oltre il 90% dei browser in base alla seguente tabella CanIUse: https://caniuse.com/#feat=css-filters

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="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

Espandi frammento

_fonte

— РАВИ
fonte

12

La risposta così breve è che non esiste una soluzione generale per la maggior parte dei browser.

— Trilarion,

18

Ma l'erotizzazione o la saturazione faranno effettivamente qualcosa per un'immagine bianca?

— Keith,

6

Aggiornamento 2016: ora funziona in quasi tutti i browser tranne IE: caniuse.com/#feat=css-filters

— Stan

4

@datatype_void A volte non controlli tu stesso l'immagine iniziale. Quindi, sembra che tu accetti che il mio punto sia valido, non puoi arrivare a nessun colore a partire dal bianco o nero. Oh, e ho giocato per più di 5 minuti per arrivare a questa conclusione.

— AsGoodAsIt Ottiene il

5

specifica anche che puoi fare cose del genere: il .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }che significa che PUOI passare dal nero e trasparente o in scala di grigi al colore e funziona anche con gif animate

— tatsu,

141

Ho trovato questo ottimo esempio in codice che inserisci il tuo valore esadecimale di colore e restituisce il filtro necessario per applicare questo colore a png

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

per esempio avevo bisogno che il mio png avesse il seguente colore # 1a9790

allora devi applicare il seguente filtro a te png

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

— Fadi Abo Msalam
fonte

12

<3 <3 <3 <3 <3 <3

— dwjohnston il

2

Ho cambiato il colore dal bianco al blu usando questo codice:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

— Anjan Biswas,

Questo è fantastico !!

— Thiago Pires,

2

L'autore merita una statua! (nota: luminosità (0) saturazione (100%) opzione opzionale che uccide ogni dubbio)

— Jackie Degl'Innocenti

1

Se qualcuno ne ha bisogno, ecco una conversione TS di questo codice gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08

— dwjohnston

56

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

EDIT: sto usando Font-Awesome sul mio ultimo progetto. Puoi persino avviarlo. 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 collegamenti ad icone come questo:

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

Ecco il cheat sheet completo

--modificare--

Font-Awesome usa nomi di classe diversi nella nuova versione, probabilmente perché questo rende i file CSS drasticamente più piccoli ed evita ambigue classi CSS. Quindi ora dovresti usare:

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

MODIFICA 2:

Ho appena scoperto che github utilizza anche il proprio carattere icona: Octicons È scaricabile gratuitamente. Hanno anche alcuni suggerimenti su come creare i propri caratteri icona .

— Jules Colle
fonte

Font Awesome è all'altezza del suo nome.

— HerrimanCoder

+1 per pensare fuori dagli schemi. E oggi ci sono app online facili da usare per aiutarti a creare un webfont da un'immagine (svg).

— yvan vander sanden,

Se <a class="icon-thumbs-up"> </a> è il vecchio nome della classe e <a class="fa fa-thumbs-up"> </a> è quello nuovo, non credo rende il CSS più piccolo, posso vedere uno spazio bianco aggiuntivo tra fa e fa-pollice in su, aggiungere almeno 1 byte aggiuntivo su quel file CSS se non sbaglio?

— Brandito,

Font Awesome è stato fantastico ai suoi tempi, purtroppo il suo blocco del rendering, che rende Google e gli utenti infelici. Per prima cosa abbiamo risolto il problema rimuovendo i caratteri inutilizzati sia dal CSS che dai file binari, riducendo i dati di circa la metà. Stiamo ora rimuovendo del tutto e sostituendo con un semplice sprite, che non rende il blocco del rendering (processo DOM e CSSOM più veloce, fa apparire gli elementi sulla pagina più velocemente) e ridurrà i dati di un altro 75%, fino a 6 KB. FA è di circa 100 KB. Le maschere CSS possono aiutare nel nostro caso, ma probabilmente non sono necessarie.

— YK,

25

Sono stato in grado di farlo utilizzando il filtro SVG. Puoi scrivere un filtro che moltiplica il colore dell'immagine sorgente con il colore che vuoi cambiare. Nello snippet di codice seguente, colore inondazione è il colore in cui vogliamo cambiare il colore dell'immagine (che in questo caso è rosso). FeComposite indica al filtro come stiamo elaborando 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 entrambi i colori di input insieme.

Nota: funziona solo con HTML5 poiché utilizza SVG in linea. Ma penso che potresti riuscire a farlo funzionare con un browser più vecchio inserendo 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>

Espandi frammento

— Vasan Jiaramaneetwesin
fonte

4

Amico, ti stai derubando di questa risposta. Chiunque cerchi di colorare le immagini oltre il filtro: hue-rotate può fare - questo è il modo di farlo.

— MaxPRafferty

23

Il tag img ha una proprietà di sfondo 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'>

— Kirill G
fonte

147

Voglio che la parte bianca sia colorata diversamente, non la parte trasparente.

— Wesley,

2

la migliore soluzione che ho trovato finora. Peccato che funzionerà solo se usi un solido colore di sfondo sui tuoi siti web

— Jules Colle

8

@Wesley allora devi invertire l'immagine (così il bit bianco diventa trasparente e il resto bianco) che puoi fare usando il tuo editor di immagini e le tue maschere preferite.

— Charles Goodwin,

5

@CharlesGoodwin Funziona solo se l'immagine viene posizionata su uno sfondo bianco.

— Alex

21

Sì :)

Surfin 'Safari - Blog Archive »Maschere CSS

WebKit ora supporta le maschere alfa nei CSS. Le maschere consentono di sovrapporre il contenuto di una scatola con un motivo che può essere utilizzato per eliminare porzioni di quella scatola nella visualizzazione finale. In altre parole, puoi tagliare a forme complesse basate sull'alfa di un'immagine.
[...]
Abbiamo introdotto nuove proprietà per fornire ai web designer un grande controllo su queste maschere e su come vengono applicate. Le nuove proprietà sono analoghe alle proprietà di sfondo e immagine del bordo già esistenti.
-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)

— benhowdle89
fonte

1

Fa parte di uno standard (ancora da venire), dal momento che non ho trovato alcuna informazione non correlata a Webkit, o è solo sapore di Apple? Sembra che il W3 stia suggerendo SVG per tali casi d'uso: w3.org/TR/SVG/masking.html

— feeela,

3

Purtroppo questo sembra essere solo un webkit e il blog tradisce usando immagini composte piuttosto che esempi reali. Questa risposta è un po 'di aringa rossa.

— Charles Goodwin,

17

Nella maggior parte dei browser , puoi utilizzare i filtri:

su entrambi gli <img>elementi e immagini di sfondo di altri elementi
e impostali staticamente nel tuo CSS o in modo dinamico usando JavaScript

Guarda le demo di seguito.

`<img>` elementi

È possibile applicare questa tecnica a un <img>elemento:

#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" />

Espandi frammento

Immagini di sfondo

È possibile 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>

Espandi frammento

JavaScript

Puoi usare JavaScript per impostare un filtro in fase di esecuzione:

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>

Espandi frammento

— John Slegers
fonte

6

La domanda riguardava la colorazione di un'immagine bianca con uno sfondo trasparente. hue-rotatenon funziona su bianco.

— Synetech,

17

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

Con qualsiasi png bianco (es. Icona bianca su sfondo trasparente), puoi 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 questo codice (applicando lo scambio di colori al passaggio del mouse): http://codepen.io/chrscblls/pen/bwAXZO

— chrscblls
fonte

Ho ospitato nuovamente l'immagine di imgur, stavo riscontrando dei problemi durante il caricamento.

— chrscblls,

Nell'ultima versione di Chrome, sembra che anche lo sfondo (trasparente) sia impostato sul colore. Nell'esempio collegato, quando ho il mouse, vedo solo un quadrato rosa opaco ... Funziona bene in Firefox.

— logidelic,

1

@chrscblls Il link è morto.

— Steven Lu

15

La linea più semplice che ha funzionato per me:

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

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

— Rehmat
fonte

Bello. Questo evita tutti i limiti delle altre soluzioni qui.

— cdonner,

3

ripetere l'ombra

— discendente

1

GENIUS SOLUTION, sembra un po 'disordinato nel CSS, ma con un commento, è perfettamente comprensibile. Grazie!

— Richard KeMiKaL GeNeRaL Denton

non funzionerà per ottenere il colore esatto, è sempre una sorta di mix tra il colore originale e quello nuovo.

— swisswiss,

questo approccio distorce leggermente l'immagine e peggiora ogni volta che viene applicata l'ombra esterna. Come fare una copia di una copia, i risultati sono diversi dall'originale.

— SMAG

8

Ho trovato questo mentre cercavo su Google, ho trovato il modo migliore di lavorare 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/

— Muthukumar Anbalagan
fonte

Funziona, ho votato. Ma solo per la cronaca ha alcuni problemi come non è possibile ridimensionare l'immagine di sfondo, non è possibile posizionare l'immagine e si ripete.

— Daniel,

Ohh, davvero non ho provato quelli ... prova sotto il link. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image grazie, Daniel

— Muthukumar Anbalagan

7

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

Invece, ho creato un div, sfruttando CSS più immagini di sfondo e la funzione gradiente 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>

Espandi frammento

— rolznz
fonte

Non ha funzionato per me. Non so dire perché, copio incollato esattamente

— Vic Seedoubleyew,

@VicSeedoubleyew lo snippet funziona bene. Ispeziona il tuo div utilizzando gli strumenti di sviluppo per assicurarti che il tuo CSS sia effettivamente applicato. Inoltre, assicurati che l'URL della tua immagine sia valido se non stai utilizzando quello che ho fornito. EDIT: se lo snippet non funziona per te, potresti utilizzare un browser obsoleto o che non supporta la funzione del gradiente lineare.

— rolznz,

5

Rispondendo perché stavo cercando una soluzione per questo.

la penna nella risposta di @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 potevo avere il loro URL nel mio CSS E non puoi usare :: after sui tag img.

Quindi, ho pensato a un lavoro in giro e ho pensato che potesse aiutare le persone se anche loro inciampano qui.

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

essendo l'URL nel mio tag img, l'ho messo (e un'etichetta) in un altro div su cui :: after funzionerà.
la 'modalità mix-blend' è impostata su 'differenza' invece di 'moltiplica' o 'schermo'.
Ho aggiunto un :: before con esattamente lo stesso valore, quindi il :: after farebbe la 'differenza' della 'differenza' fatta dal :: before e cancellerebbe se stesso.

Per cambiarlo da nero a bianco o bianco a nero il colore di 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

— Salix
fonte

3

Non è necessario un set di caratteri completo se è necessaria solo un'icona, inoltre ritengo che sia più "pulito" come singolo elemento. Pertanto, a tale scopo, in HTML5 è possibile posizionare un file SVG direttamente all'interno del flusso di documenti. Quindi puoi definire una classe nel tuo foglio di stile .CSS e accedere al suo colore di sfondo con la fillproprietà:

Violino di lavoro: http://jsfiddle.net/qmsj0ez1/

Si noti che, nell'esempio, ho usato :hoverper illustrare il comportamento; se vuoi solo cambiare colore per lo stato "normale", dovresti rimuovere la pseudoclasse.

— Pere
fonte

1

Per cambiare letteralmente il colore, puoi 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%);
    }

— beta208
fonte

1

Quando si cambia un'immagine da nero a bianco o da bianco a nero, il filtro di rotazione della tonalità non funziona, poiché il bianco e nero non sono tecnicamente colori. Invece, i cambi di colore in bianco e nero (da nero a bianco o viceversa) devono essere effettuati con la proprietà di filtro invertito.

.img1 { filter: invert(100%); }

— Samuel stankiewicz
fonte

0

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

Espandi frammento

Fonte: https://codepen.io/taryaoui/pen/EKkcu

— Bashirpour
fonte

Cambia il colore dell'immagine PNG tramite CSS?

Surfin 'Safari - Blog Archive »Maschere CSS

<img> elementi

Immagini di sfondo

JavaScript

`<img>` elementi