Alterar a cor da imagem PNG via CSS?

464

Dado um PNG transparente exibindo uma forma simples em branco, é possível alterar de alguma forma a cor disso por meio de CSS? Algum tipo de sobreposição ou o que não?

css image colors png overlay Wesley
fonte
4
Você pode definir a background-colorpropriedade CSS. Você pode criar partes não transparentes que serão corrigidas e partes transparentes da imagem que serão preenchidas com qualquer cor que você desejar via CSS. É isso que você deseja alcançar?
jakub.g
2
@ qbk, vale a pena responder, não apenas um comentário. E você me venceu por 1 segundo, tecnicamente.
precisa
2
Você pode usar elementos psuedo com um modo de mesclagem para recolorir qualquer ícone que seja 100% preto ou 100% branco (o fundo permanece transparente). Veja minha resposta aqui: stackoverflow.com/a/39796437/1472114
chrscblls

Respostas:

569

Você pode usar filtros com -webkit-filtere filter: Os filtros são relativamente novos para os navegadores, mas são suportados em mais de 90% dos navegadores, de acordo com a seguinte tabela CanIUse: https://caniuse.com/#feat=css-filters

Você pode alterar uma imagem para escala de cinza, sépia e muito mais (veja o exemplo).

Agora você pode alterar a cor de um arquivo PNG com filtros.

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">
Expandir snippet

Fonte

РАВИ
fonte
12
Uma resposta tão curta é que não há solução geral para a maioria dos navegadores.
Trilarion
18
Mas huerotar ou saturar realmente fará algo com uma imagem branca?
Keith
6
Atualização de 2016: isso agora funciona em quase todos os navegadores, exceto no IE: caniuse.com/#feat=css-filters
Stan
4
@datatype_void Às vezes você não controla a imagem inicial. Então, parece que você concorda que meu argumento é válido, você não pode obter nenhuma cor começando em preto ou branco. Ah, e eu joguei por mais de 5 minutos para chegar a essa conclusão.
AsGoodAsItGets
5
também especificar que você pode fazer coisas como esta: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }o que significa que você pode ir de preto e transparente ou em tons de cinza com a cor e funciona mesmo em gifs animados
tatsu
140

Encontrei este ótimo exemplo de codepen que você insere seu valor de cor hexadecimal e ele retorna o filtro necessário para aplicar essa cor a png

Gerador de filtros CSS para converter de preto para cor hexadecimal alvo

por exemplo, eu precisava do meu png para ter a seguinte cor # 1a9790

então você deve aplicar o seguinte filtro a você 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
2
Eu mudei a cor para branco do azul usando este código:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
Anjan Biswas
Isso é ótimo!!
Thiago Pires
2
Autor merece uma estátua! (note o: brilho (0) saturar (100%) opcional preceder que mata qualquer dúvida)
Jackie Degl'Innocenti
1
Se alguém precisar, aqui é uma conversão TS deste código gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08
dwjohnston
56

Você pode dar uma olhada nas fontes Icon. http://css-tricks.com/examples/IconFont/

Edição: Estou usando Font-Awesome no meu projeto mais recente. Você pode até inicializá-lo. Basta colocar isso no seu <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 então vá em frente e adicione alguns links de ícones como este:

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

Aqui está a folha de dicas completa

--editar--

O Font-Awesome usa nomes de classes diferentes na nova versão, provavelmente porque isso reduz drasticamente os arquivos CSS e evita classes css ambíguas. Então agora você deve usar:

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

EDIT 2:

Acabei de descobrir que o github também usa sua própria fonte de ícone: Octicons É gratuito para download. Eles também têm algumas dicas sobre como criar suas próprias fontes de ícones .

Jules Colle
fonte
Font Awesome faz jus ao seu nome.
precisa
+1 para pensar fora da caixa. Atualmente, existem aplicativos on-line fáceis de usar para ajudar a criar uma fonte da web a partir de uma imagem (svg).
Yvan vander Sanden
Se <a class="icon-thumbs-up"> </a> é o nome da classe antiga e <a class="fa fa-thumbs-up"> </a> é o novo, eu não acho torna o CSS menor, vejo um espaço em branco adicional entre fa e fa-thumbs-up, adicione pelo menos 1 byte adicional nesse arquivo CSS, se não me engano?
Brandito 28/05
Font Awesome foi ótimo em seu dia, infelizmente, seu bloqueio de renderização, o que deixa o Google e seus usuários infelizes. Primeiro, resolvemos isso removendo fontes não usadas dos arquivos de fonte CSS e binário, reduzindo os dados pela metade. Agora, estamos removendo completamente e substituindo por um simples sprite, que não é um bloqueio de renderização (o processo DOM e CSSOM é mais rápido, torna os elementos da página mais rápidos) e reduz os dados em outros 75%, para 6 KB. FA é de cerca de 100 KB. Máscaras CSS podem ajudar no nosso caso, mas provavelmente desnecessárias.
YK
25

Consegui fazer isso usando o filtro SVG. Você pode escrever um filtro que multiplique a cor da imagem de origem pela cor que deseja alterar. No trecho de código abaixo, cor de inundação é a cor para a qual queremos alterar a cor da imagem (que é vermelha nesse caso.) FeComposite diz ao filtro como estamos processando a cor. A fórmula para feComposite com aritmética é (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) em que i1 e i2 são cores de entrada para in / in2 de acordo. Portanto, especificar apenas k1 = 1 significa que ele fará apenas i1 * i2, o que significa multiplicar as duas cores de entrada.

Nota: Isso funciona apenas com HTML5, pois está usando SVG embutido. Mas acho que você poderá fazer isso funcionar com um navegador mais antigo colocando o SVG em um arquivo separado. Ainda não tentei essa abordagem.

Aqui está o trecho: 

<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>
Expandir snippet

Vasan Jiaramaneetwesin
fonte
4
Cara, você está sendo roubado nesta resposta. Qualquer pessoa que queira colorir imagens além do filtro: a rotação de matiz pode fazer - esse é o caminho.
MaxPRafferty
23

A tag img possui uma propriedade background como qualquer outra. Se você tiver um PNG branco com uma forma transparente, como um estêncil, poderá fazer o seguinte:

<img src= 'stencil.png' style= 'background-color: red'>
Kirill G
fonte
147
Quero que a parte branca seja colorida de maneira diferente, não a parte transparente.
Wesley
2
melhor solução que encontrei até agora. Pena que só irá funcionar se você usar um sólido background-color em seus sites
Jules Colle
8
@Wesley, você precisa inverter a imagem então (para que o bit branco fique transparente e o restante branco), o que você pode fazer usando o seu editor de imagens e máscaras favoritos.
Charles Goodwin #
5
@CharlesGoodwin Isso só funciona, então a imagem é colocada em um fundo branco.
12808 Alex
21

Sim :)

Surfin 'Safari - Blog Archive »Máscaras CSS

O WebKit agora suporta máscaras alfa em CSS. As máscaras permitem sobrepor o conteúdo de uma caixa com um padrão que pode ser usado para eliminar partes dessa caixa na exibição final. Em outras palavras, você pode recortar para formas complexas com base no alfa de uma imagem.
[...]
Introduzimos novas propriedades para fornecer aos designers da Web muito controle sobre essas máscaras e como elas são aplicadas. As novas propriedades são análogas às propriedades de imagem de fundo e de borda que já existem.

-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
Isso faz parte de algum padrão (ainda por vir), pois eu não encontrei nenhuma informação não relacionada ao Webkit ou apenas o sabor da Apple? Parece que a W3 está sugerindo SVG para tais casos de uso: w3.org/TR/SVG/masking.html
feeela
3
Infelizmente, isso parece ser apenas o webkit e o blog engana usando imagens compostas em vez de exemplos reais. Esta resposta é um pouco de arenque vermelho.
Charles Goodwin
17

Na maioria dos navegadores , você pode usar filtros:

  • nos <img>elementos e nas imagens de fundo de outros elementos

  • e defina-os estaticamente em seu CSS ou dinamicamente usando JavaScript

Veja as demonstrações abaixo.

<img> elementos

Você pode aplicar esta técnica a um <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" />
Expandir snippet

Imagens de fundo

Você pode aplicar esta técnica a uma imagem de plano de fundo:

#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>
Expandir snippet

Javascript

Você pode usar o JavaScript para definir um filtro em tempo de execução:

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>
Expandir snippet

John Slegers
fonte
6
A pergunta era sobre colorir uma imagem branca com fundo transparente. hue-rotatenão funciona em branco.
Synetech
17

Acho que tenho uma solução para isso que é a) exatamente o que você procurava há 5 anos eb) é um pouco mais simples do que as outras opções de código aqui.

Com qualquer png branco (por exemplo, ícone branco em fundo transparente), você pode adicionar um seletor :: after para recolorir.

.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 */
}

Veja este código (aplicando a troca de cores ao passar o mouse): http://codepen.io/chrscblls/pen/bwAXZO

chrscblls
fonte
Re-hospedei a imagem do imgur, estava tendo alguns problemas para carregá-la.
Chscblls
Na versão mais recente do Chrome, parece que o plano de fundo (transparente) também está sendo definido para a cor. No exemplo vinculado, quando passo o mouse, vejo apenas um quadrado rosa opaco ... Funciona bem no Firefox.
logidelic
1
@chrscblls O link está morto.
Steven Lu
15

A linha mais simples que funcionou para mim:

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

Você pode ajustar a opacidade de 0 a 1 para tornar a cor mais clara ou mais escura.

Rehmat
fonte
Agradável. Isso evita todas as limitações das outras soluções aqui.
cdonner
3
repeat gota-sombra 2-3 vezes para torná-lo mais forte
djdance
1
SOLUÇÃO GENIUS, parece um pouco confuso no CSS, mas com um comentário, é perfeitamente compreensível. Obrigado!
Richard KeMiKaL GeNeRaL Denton 03/12/19
não funcionará para obter cores exatas, é sempre algum tipo de mistura entre a cor original e a nova.
swisswiss 17/02
essa abordagem distorce levemente a imagem e piora toda vez que o sombreamento é aplicado. Como fazer uma cópia de uma cópia, os resultados são diferentes do original.
SMAG 21/02
8

Descobri isso enquanto pesquisava no Google, achei melhor trabalhar para mim ...

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
Isso funciona, votei em cima. Mas apenas para o registro, ele tem alguns problemas, como não pode dimensionar a imagem de fundo, não pode posicionar a imagem e se repete.
Daniel
Ohh, eu realmente não tentei aqueles ... tente no link abaixo. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image graças, Daniel
Muthukumar Anbalagan
7

Como exigia uma cor específica, o filtro não funcionava para mim.

Em vez disso, criei uma div, explorando várias imagens de plano de fundo do CSS e a função gradiente linear (que cria a própria imagem). Se você usar o modo de mesclagem de sobreposição, sua imagem real será combinada com a imagem "gradiente" gerada que contém a cor desejada (aqui, # 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>
Expandir snippet

rolznz
fonte
Não funcionou para mim. Eu não posso dizer por quê, eu copiar colado exatamente
Vic Seedoubleyew
@VicSeedoubleyew, o snippet funciona bem. Inspecione sua div usando ferramentas de desenvolvimento para garantir que seu CSS esteja realmente sendo aplicado. Além disso, verifique se o URL da sua imagem é válido se você não estiver usando o que eu forneci. EDIT: Se o snippet não funcionar, você pode estar usando um navegador desatualizado ou que não suporta a função gradiente linear.
Rolznz 17/05/19
5

Respondendo porque estava procurando uma solução para isso.

a caneta na resposta @chrscblls funciona bem se você tem um fundo branco ou preto, mas o meu não. Além disso, as imagens foram geradas com ng-repeat, então eu não poderia ter o URL deles no meu css E você não pode usar :: after nas tags img.

Então, imaginei uma solução e pensei que poderia ajudar as pessoas se elas também tropeçarem aqui.

Então, o que eu fiz é praticamente o mesmo com três diferenças principais:

  • como o URL está na minha tag img, coloquei (e um rótulo) em outra div na qual :: after funcionará.
  • o 'modo mistura-mistura' é definido como 'diferença' em vez de 'multiplicar' ou 'tela'.
  • Eu adicionei um :: before com exatamente o mesmo valor, para que o :: after fizesse a 'diferença' da 'diferença' feita pelo :: before e o cancelasse.

Para alterá-lo de preto para branco ou branco para preto, a cor do plano de fundo precisa ser branca. Do preto às cores, você pode escolher qualquer cor. Do branco às cores, você precisará escolher a cor oposta à desejada.

.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

Não há necessidade de um conjunto de fontes inteiro, se você precisar apenas de um ícone, além disso, sinto que é mais "limpo" como um elemento individual. Portanto, para esse fim, em HTML5, você pode colocar um SVG diretamente dentro do fluxo do documento. Em seguida, você pode definir uma classe na folha de estilo .CSS e acessar sua cor de plano de fundo com a fillpropriedade

Violino de trabalho: http://jsfiddle.net/qmsj0ez1/

Observe que, no exemplo, eu usei :hoverpara ilustrar o comportamento; se você quiser apenas mudar de cor para o estado "normal", remova o pseudoclasse.

Pere
fonte
1

Para literalmente mudar a cor, você pode incorporar uma transição CSS com um filtro -webkit-onde, quando algo acontece, você chamaria o -webkit-filtro de sua escolha. Por exemplo:

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

Ao alterar uma imagem de preto para branco ou de branco para preto, o filtro de rotação da tonalidade não funciona, porque preto e branco não são tecnicamente cores. Em vez disso, as alterações de cor preto e branco (de preto para branco ou vice-versa) devem ser feitas com a propriedade de filtro invertido.

.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>
Expandir snippet

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

Bashirpour
fonte