Change image color with CSS

Navigation
1

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

    
asked by anonymous 23.06.2017 / 21:27

3 answers

6

There are 3 ways (or 4 ~ 5):

CSS Filters

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.

Switch background-image

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 -->

Switch background-position (CSS Sprite)

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 uses fill (since the image would be a vector), as soon as possible add an example.

    
23.06.2017 / 21:50
2

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>
    
23.06.2017 / 21:45
-1

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.

    
23.06.2017 / 21:32
Reorder variables by throwing the empty ones to the end Using $ this in POO PHP [duplicate]