Alterar a cor da imagem PNG via CSS?

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

Você pode usar filtros por -webkit-filter e filter : Os filtros são muito novos para navegadores e são -webkit-filter apenas em navegadores modernos. Você pode alterar uma imagem para escala de cinza, sépia e muito mais (veja o exemplo).

Então agora você pode mudar 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%); } 
  Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa 

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

EDIT: Eu estou usando Font-Awesome no meu mais recente projeto. Você pode até mesmo fazer o bootstrap. Basta colocar isso no seu :

    

E então vá em frente e adicione alguns links de ícone como este:

  

Aqui está a folha de cola completa

–editar–

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

  

EDIT 2:

Só descobri que o github também usa sua própria fonte de icons: Octicons É grátis fazer o download. Eles também têm algumas dicas sobre como criar suas próprias fonts de icons .

A tag img tem uma propriedade de plano de fundo igual a qualquer outra. Se você tem um PNG branco com uma forma transparente, como um estêncil, você pode fazer isso:

  

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 checkbox com um padrão que pode ser usado para derrubar partes dessa checkbox na exibição final. Em outras palavras, você pode recortar formas complexas baseadas no alfa de uma imagem.
[…]
Introduzimos novas propriedades para fornecer aos Web designers muito controle sobre essas máscaras e como elas são aplicadas. As novas propriedades são análogas às propriedades de fundo e imagem 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) 

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

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

Aqui está o trecho:

                            

Na maioria dos navegadores , você pode usar filtros:

  • em ambos os elementos e imagens de fundo de outros elementos

  • e defini-los estaticamente em seu CSS ou dinamicamente usando JavaScript

Veja demonstrações abaixo.


elementos

Você pode aplicar essa técnica a um elemento :

 #original, #changed { width: 45%; padding: 2.5%; float: left; } #changed { -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); } 
   

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

Com qualquer png branco (por exemplo, ícone branco em fundo transparente), você pode adicionar um :: after selector 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 codepen (aplicando a troca de colors no hover): http://codepen.io/chrscblls/pen/bwAXZO

Eu precisava de uma cor específica, então o filtro não funcionou para mim.

Em vez disso, criei um div, explorando várias imagens de plano de fundo do CSS e a function de gradiente linear (que cria uma imagem em si). Se você usar o modo de mesclagem de sobreposição, sua imagem real será mesclada com a imagem “gradiente” gerada contendo 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; } 
 

Eu encontrei este ótimo exemplo de código que você insere seu valor de cor hexadecimal e ele retorna o filtro necessário para aplicar essa cor em png

Gerador de filtro CSS para converter de preto para cor hexadecimal

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

então você tem que aplicar o seguinte filtro para você png

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

Não há necessidade de um conjunto de fonts completo se você precisar apenas de um ícone, além disso, sinto que ele é mais “limpo” como um elemento individual. Então, para isso, em HTML5 você pode colocar um SVG diretamente dentro do stream de documentos. Em seguida, você pode definir uma class em sua folha de estilos .CSS e acessar sua cor de plano de fundo com a propriedade de fill :

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

Observe que, no exemplo, usei :hover para ilustrar o comportamento; Se você quiser apenas mudar de cor para o estado “normal”, deve remover a pseudoclass.

Respondendo porque eu 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 era. Além disso, as imagens foram geradas com ng-repeat, então eu não poderia ter seu url no meu css e você não pode usar: depois de img tags.

Então, resolvi dar uma voltinha e pensei que poderia ajudar as pessoas se elas também tropeçassem aqui.

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

  • o URL está na minha tag img, eu coloquei (e um label) em outro div em que :: depois vai funcionar.
  • o ‘mix-blend-mode’ é definido como ‘difference’ em vez de ‘multiply’ ou ‘screen’.
  • Eu adicionei um :: before com exatamente o mesmo valor para que o :: after fizesse a ‘diferença’ da ‘diferença’ feita pelo :: before e cancelasse-se.

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

 .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

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

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