2

É possível mudar a cor de uma imagem com CSS? Aplicando um filtro talvez, ou algo parecido. Tem como? Por exemplo, uma imagem assim: https://cdn.pixabay.com/photo/2016/06/02/16/14/tablet-1431399_960_720.png

4
  • Lucas, que tipo de filtro você quer aplicar? inverte as cores? preto e branco? escala de cinza? Commented 23/06/2017 às 19:29
  • Detalhes, precisamos de detalhes.
    – Woss
    Commented 23/06/2017 às 19:30
  • É, digamos que no mínimo preto e branco. Essa imagem por exemplo, é possível por ela branca, somente com cSS? Commented 23/06/2017 às 19:30
  • Tenho uma ideia que acho que funciona pra colocar a cor que vc quiser apenas com CSS e uma unica imagem e até trocar a cor em runtime com jquery se precisar. Commented 3/06/2020 às 0:57

3 Respostas 3

13

Existem 3 maneiras (ou 4~5):

Filtros CSS

O CSS tem a propriedade filter suportado por todos navegadores modernos, veja no caniuse, no entanto o Edge não suporta o valor com url() e Opera mini e Internet Explorer 11 não tem suporte, exemplos que ajudam a colorir:

Valores Descrição
filter: url("filters.svg#filter-id"); Adiciona um filtro baseado em um SVG, no firefox antes este era o único suportado, assim que possível irei editar com detalhes sobre este especificamente
filter: brightness(.4); Muda o brilho
filter: contrast(200%); Muda o contraste
filter: grayscale(50%); Muda o nível de cinza
filter: invert(75%); Inverte as cores, baseado em porcentagem
filter: opacity(25%); Muda a opacidade
filter: saturate(30%); Muda a saturação
filter: sepia(60%); Muda o "tom" de sépia

Eles podem ser combinados:

filter: contrast(175%) brightness(3%);

Tem outros filtros, mas geralmente são de sombra.

Os valores em porcentagem podem ser usado com %, o equivalente: .5 será o mesmo 50% e 100% será o mesmo 1 (1.0)

Eles podem ser combinados:

filter: contrast(1.75) brightness(.3);

Trocar o background-image

Criando duas imagens pode alternar usando CSS

Por exemplo com hover:

<style>
.bg {
     background: url(../images/foto-vermelha.jpg) no-repeat;
     width: 300px;
     height: 300px;
}
.bg:hover {
     background-image: url(../images/foto-azul.jpg);
}
</style>

<div class="bg"></div>

Ou com classe extra (para usar coisas como Element.classList.toggle do JavaScript):

<style>
.bg {
     background: url(../images/foto-vermelha.jpg) no-repeat;
     width: 300px;
     height: 300px;
}
.bg-azul {
     background-image: url(../images/foto-azul.jpg);
}
</style>

<div class="bg"></div> <!-- mostra a foto em cores vermelhas -->
<div class="bg bg-azul"></div> <!-- mostra a foto em cores azuis -->

Trocar o background-position (CSS Sprite)

O CSS Sprite é uma técnica que pode combinar múltiplas imagens para trocar a foto mudando a posição da imagem no background, a imagem deve ser semelhante a estrela, o checked e alguns outros usam (esta imagem é do proprio SOpt):

sprites SOpt

Um exemplo:

.css-sprite {
    background:  url(https://cdn.sstatic.net/Sites/br/img/sprites.svg?v=554232ea0d79) -5px -120px no-repeat;
    width: 25px;
    height: 25px;
}

.css-sprite:hover {
    background-position: -45px -120px;
}
<div class="css-sprite"></div>

Tem mais 2, ambos com SVG, um utiliza #target e o outro utiliza fill (já que a imagem seria um vetor), assim que possível adiciono um exemplo.

6

você tem duas opções, usando CSS (porem tem pouco suporte por parte dos navegadores) ou aplicando um filtro sobre o SVG.

Filtro CSS:

img {
  width: 300px;
  filter: grayscale(1)
}
<img src="http://abhiyantri.com/wp-content/uploads/stackoverflow2.jpg" />

Filtro SVG:

img {
  width: 300px;
  filter: url(svg#grayscale)
}
<img src="http://abhiyantri.com/wp-content/uploads/stackoverflow2.jpg" />
<svg>
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>

Agora vou alterar os canais no filtro.:

img {
  float: left;
  width: 300px;
}

#img0 {
  filter: url(svg#normal)
}

#img1 {
  filter: url(svg#grayscale)
}

#img2 {
  filter: url(svg#redscale)
}

#img3 {
  filter: url(svg#greenscale)
}

#img4 {
  filter: url(svg#bluescale)
}

#img5 {
  filter: url(svg#inverter_canais)
}
<img id="img0" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img1" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img2" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img3" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img4" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<img id="img5" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg" />

<svg>
  <filter id="normal">
    <feColorMatrix 
      values="1 0 0 0 0     
              0 1 0 0 0      
              0 0 1 0 0      
              0 0 0 1 0"/>
  </filter>
</svg>

<svg>
  <filter id="grayscale">
    <feColorMatrix 
      values="0.33 0.33 0.33 0 0     
              0.33 0.33 0.33 0 0      
              0.33 0.33 0.33 0 0      
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="redscale">
    <feColorMatrix 
      values="0.33 0.33 0.33 0 0
              0    0    0    0 0      
              0    0    0    0 0      
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="greenscale">
    <feColorMatrix 
      values="0    0    0    0 0  
              0.33 0.33 0.33 0 0
              0    0    0    0 0      
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="bluescale">
    <feColorMatrix 
      values="0    0    0    0 0  
              0    0    0    0 0  
              0.33 0.33 0.33 0 0
              0    0    0    1 0"/>
  </filter>
</svg>

<svg>
  <filter id="inverter_canais">
    <feColorMatrix 
      values="0   0.5 0.5 0 0  
              0.5 0   0.5 0 0  
              0.5 0.5 0   0 0
              0   0   0   1 0"/>
  </filter>
</svg>

-1

Consegui, usando o filter: invert(100%) a imagem inverte a cor, no caso de preto, vai pra branco. Deixei a resposta pra ajudar mais pessoas que precisem.

3

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 .