Change color a png image with transparent background

For things like this, SVG .

It does not make sense for you to use an external image when you can save that HTTP request and also make it more maintainable.

MARKING:

First we define our star using the <path> :

<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>

It is important that you use the CSS variable currentColor in the attribute fill of <path> to be able to change the color of your icon with the property color in CSS.

Since we have our star, we will wrap it in the <symbol> mark and we will give it a id to be able to use it in a few steps later. You can add a title to help with accessibility issues. (Info on viewBox here )

 <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>

Next, we will make our sprite sheet to use it as a container if we want to add more icons. We will give you a id to hide the element in CSS for reasons that in some browsers it shows an unwanted white space.

<svg id="spriteSheet">
  <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

Since we have our SVG markup, we can now use it with the <use> tag as follows:

<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>

Here we will give you a general block-level class and a modifier. Within the <use> tag we reference our symbol by calling its id .

Each time you want to use this icon you simply paste this piece of code.

STYLE:

Do you remember the classes we defined earlier in our <svg> ?

icono icono--estrella

These will help us to style our element.

.icono {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icono--estrella {
  font-size: 4em; /* Este es el tamaño del icono */
  color: lightblue; /* Este es el color del icono*/
}

And we simply hide our sprite sheet.

#spriteSheet {
  display: none;
}

And ready!

CODE FRAGMENT:

#spriteSheet {
  display: none;
}
.icono {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icono--estrella {
  font-size: 4em;
  color: lightblue;
}
.icono--estrella:nth-child(2) {
  color: red;
}
.icono--estrella:nth-child(3) {
  color: green;
}
.icono--estrella:nth-child(4) {
  color: yellow;
}

<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
  <use xlink:href="#iconoEstrella"></use>
</svg>

<svg id="spriteSheet">
  <symbol id="iconoEstrella" viewBox="0 0 32 32">
    <title>Estrella</title>
    <path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

More on this technique here .

Of course you can do on png images by applying the filter property on a class, how the filter works according to the consortium: "A filter effect is a graphical operation that is applied to an element as it is drawn in the document. it deals with an image-based effect, in which zero or more input images are taken, (applies) a series of specific parameters for the effect, and then produces as output (result) an image. "

Now I show you the example code to guide you:

body
{
background: #000;
}
.efecto
{
	-moz-filter: opacity(0.5) drop-shadow(0 0 0 white);
	-webkit-filter: opacity(0.5) drop-shadow(0 0 0 white);
	filter: opacity(0.5) drop-shadow(0 0 0 white);
}
.efecto:hover
{
	-moz-filter: opacity(0.2) drop-shadow(0 0 0 #2b8);
	-webkit-filter: opacity(0.2) drop-shadow(0 0 0 #2b8);
	filter: opacity(0.2) drop-shadow(0 0 0 #2b8);
}

<div class="efecto">
  <img src="https://i.stack.imgur.com/bd7VJ.png" />
</div>
<br>
<div class="efecto">
<img src="https://orig00.deviantart.net/9f95/f/2012/166/4/5/mano_png_by_sandhansen-d53lqev.png" />
</div>

If what you do is apply a shadow on the png image, with opacity you give transparency to the png object in question so that it can take the color you are assigning it, in the hover you simply change it by the color you want, this is a half solution, but just as functional, I hope it will help you, if you have doubts, do not hesitate to ask, greetings.

In this example you can not, since it is a png! the easiest thing would be to create the star with CSS / CSS3

If you prefer not to waste your time, you have fonts like FontAwesome that facilitate everything, then just change the color by CSS

link

You can modify the filter and saturation of the image, example:

 img{
    	height: 35px;
 }
#estrella {-webkit-filter: saturate(10); filter: saturate(8);}
#estrella2 {-webkit-filter: saturate(5); filter: saturate(60);}

    	<div id="estrella"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>
      
      <div id="estrella2"><img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Star.png"></div>