Is it possible to change the color of an image with CSS? Applying a filter maybe, or something like that. Has as? For example, an image like this: link
Is it possible to change the color of an image with CSS? Applying a filter maybe, or something like that. Has as? For example, an image like this: link
There are 3 ways (or 4 ~ 5):
CSS has the filter
property supported by all modern browsers, check out the caniuse , however. Edge does not support the value with url()
and Opera mini and Internet Explorer 11 is not supported, examples that help color:
filter: url("filters.svg#filter-id"); //Adiciona um filtro baseado em um SVG, no firefox antes este era o único suportado, assim que possivel irei editar com detalhes sobre este especificamente
filter: brightness(0.4); //Muda o brilho
filter: contrast(200%); //Muda o constrate
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
They can be combined:
filter: contrast(175%) brightness(3%);
It has other filters, but they are usually shadow or rotating.
Creating two images you can toggle using CSS
For example with hover:
.bg {
background: url(../images/foto-vermelha.jpg) no-repeat;
width: 300px;
height: 300px;
}
.bg:hover {
background-image: url(../images/foto-azul.jpg);
}
<div class="bg"></div>
Or with extra class (to use things like Element.classList.toggle
of JavaScript):
.bg {
background: url(../images/foto-vermelha.jpg) no-repeat;
width: 300px;
height: 300px;
}
.bg-azul {
background-image: url(../images/foto-azul.jpg);
}
<div class="bg"></div> <!-- mostra a foto em cores vermelhas -->
<div class="bg bg-azul"></div> <!-- mostra a foto em cores azuis -->
CSS Sprite is a technique that can combine multiple images to change the image by changing the position of the image in the background, the image should be similar to the star, checked and some others use (this image is of SOpt):
An example:
.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>
It has 2 more, both with SVG, one uses
#target
and the other usesfill
(since the image would be a vector), as soon as possible add an example.
You have two options, using CSS (however it has little browser support) or by applying a filter over SVG.
CSS Filter:
img {
width: 300px;
filter: grayscale(1)
}
<img src="http://abhiyantri.com/wp-content/uploads/stackoverflow2.jpg"/>
SVGFilter:
img {
width: 300px;
filter: url(svg#grayscale)
}
<img src="http://abhiyantri.com/wp-content/uploads/stackoverflow2.jpg"/><svg><filterid="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>
Now I'm going to change the channels in the filter.:
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"/><imgid="img1" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg"/><imgid="img2" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg"/><imgid="img3" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg"/><imgid="img4" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg"/><imgid="img5" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1293/1293392-bigthumbnail.jpg"/><svg><filterid="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>
I managed, using the filter: invert(100%)
the image reverses the color, in the case of black, goes to white. I left the answer to help more people who need it.