Can CSS be used to tint a gray level icon?

Question

I've some icons on my webapp that are in gray level with a transparent background.

Is it possible to give a tint to a such image through CSS ? I would dream of something letting me play with saturation and hue of an image or an element.

If it doesn't exist, is it under discussion for a future version of CSS ?

This is the kind of image I would like to color : http://www.clker.com/clipart-transparent-arrow.html

This NOT what I want to do : jQuery: there is a way to apply colour (tint) to an image?

One workaround would be to use JavaScript http://www.pixastic.com/lib/

Answer 1

There is way, you can read full story on link below, but that is CSS3 and may not work on some older browsers

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

some examples

img.icon {
      -webkit-filter: sepia(78%);
}

img.icon {
      -webkit-filter: grayscale(100%);  /* safari/chrome */
      -moz-filter: grayscale(100%); /* firefox */
      -ms-filter: grayscale(100%);  /* IE >= 9 */
      -o-filter: grayscale(100%); /* Opera, if support CSS3 */
      filter: gray; filter: grayscale(100%); /* edge browsers */ 

}

Answer 2

You could add a pseudo-element with rgba() on top of your icon.

Also, if using an unicode character instead of an image, you could use rgba() or hsla() for that as well.