6

Eu tenho uma imagem, que é a logo do cliente, toda colorida. Em alguns momentos, preciso dessa logo completamente branca, para aplicar em backgrounds escuros.

Não quero sempre ter que usar dois PNGs e gostaria de saber se tem como fazer apenas pelo CSS.

Gostaria de um resultado parecido com isso:

imagem colorida

img{
  background-color: #222;
}
<img src="https://i.stack.imgur.com/3cz57.png">

Tem como fazer isso apenas com CSS?

3
  • 1
    Gosto de SVG+xlink (com a tag <use>), mas a pergunta é de PNG :)
    – Syzoth
    12/12/2019 às 13:43
  • 4
    Então você prefere carregar sempre um arquivo maior e modificar com CSS (sem grande suporte, e de maneira não confiável, como pode ser verificado nas soluções propostas) do que usar um mais compacto em algumas situações?
    – Largato
    12/12/2019 às 14:24
  • É um bom questionamento o seu, mas pelo menos vale o aprendizado sobre CSS. Talvez avaliando bem faça sentido usar uma só. Se bem que de toda maneira, o arquivo já é carregado uma vez na página. 12/12/2019 às 14:27

2 Respostas 2

9

Crie uma classe chamada de .branca para usar sempre que quiser o avatar em branco. Use as propriedades de filter do CSS, brightness(100) e pronto, isso vai aumentar o brilho da imagem e "estourar" o branco (como dizem os fotógrafos), o suficiente para deixá-la branca. Se quiser preta troque por brightness(0) e vai tirar totalmente o brilho da imagem.

m

Aqui você pode consultar o suporte dos browsers. Obviamente não funciona no IE.

body {
  background-color: red;
}

.branca {
  filter: brightness(100);
}
.preta {
  filter: brightness(0);
}
<img class="" src="https://i.stack.imgur.com/uzMCi.png">
<img class="branca" src="https://i.stack.imgur.com/uzMCi.png">
<img class="preta" src="https://i.stack.imgur.com/uzMCi.png">

Aqui tem um sandbox para você testar os filtros do CSS.

OBS: É interessante testar em imagens deferentes para ter certeza que essa técnica vai funcionar em todos os casos, com imagens pequenas e grandes, .gif, .png, .bmp, .tif, .wmf ou qq outro formato que tenha transparência e seja interpretado pelo browser...

4
  • 1
    Eu tinha visto uma resposta que usava filter: brightness(0) invert(1) :) 12/12/2019 às 14:04
  • 2
    @WallaceMaxters haha tinha sim 😅, mas era desnecessário o invert, uma vez que só com bright eu consigo "estourar" o brilho até ficar branca.
    – hugocsl
    12/12/2019 às 14:09
  • 6
    Vale lembrar que não é uma técnica muito confiável, o próprio exemplo tem manchas no resultado final. E isso pelo fato da imagem colorida ainda não ter tanto contraste assim. Fora que isso detona o antialias, dependendo do tipo de imagem
    – Largato
    12/12/2019 às 14:26
  • 2
    @Bacco sim se der zoom na imagem não fica muito bom mesmo não, mas a própria resolução da imagem já não ajuda. Vamos ver se aparece outra opção. Estou pensando aqui em uma outra forma, mas mesmo que funcione o suporte seria ainda menor que o do filter. Mas mudeo de 10 para 100 e as manchar melhoraram bem
    – hugocsl
    12/12/2019 às 14:33
-5

Creio que não seja possível realizar edição de imagem com css. Alguns efeitos podem te deixar perto da onde quer chegar.

Apesar de fugir um pouco do que perguntou. Minha solução para o problema seria exportar a logo para svg. Como svg você pode trocar a cor do elemento como se fosse uma fonte com a propriedade 'color' do css. Assim você não esta limitado a preto e branco.

Outra solução com css é inverter as cores da imagem com 'filter'.

https://davidwalsh.name/invert-colors-css

2
  • O link não responde a pergunta de como executar um efeito que mude de preto para branco e vice versa como pedido? 13/12/2019 às 14:21
  • 1
    Amigo resposta por link não é permitida no site pelo simples fato desse link poder deixar de existir a qualquer momento, então o conteúdo do StackOverflow deve estar contido aqui dentro e não em link de terceiros onde não se tem controle. Além disso o link que vc postou está em inglês, outra coisa que também não é permitida aqui, já que somos a comunidade em PT do StackOverflow.... 16/12/2019 às 11:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .