É 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
-
Lucas, que tipo de filtro você quer aplicar? inverte as cores? preto e branco? escala de cinza?– Tobias MesquitaCommented 23/06/2017 às 19:29
-
Detalhes, precisamos de detalhes.– WossCommented 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?– Lucas de CarvalhoCommented 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.– Tales Cembraneli DantasCommented 3/06/2020 às 0:57
3 Respostas
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 mesmo50%
e100%
será o mesmo1
(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):
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 utilizafill
(já que a imagem seria um vetor), assim que possível adiciono um exemplo.
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>
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.
-
1Por quê não aproveita e faz um Exemplo Mínimo, Completo e Verificável?– WossCommented 23/06/2017 às 19:34
-
Eu não sei usar aquela função de executar aqui do SO, poderia me passar Anderson? Commented 23/06/2017 às 19:35
-
1