CSS Color Overlay PNG

Question

I thought that there would be an answer to this but I have not found one.

I have a PNG image with a transparent background. Through CSS I'd like the image (not the transparent background) to change to a different color.

There should be a way to do this through web-kit... but I've heard that that way isn't supported... Is there another way to do it, if not how can I achieve this through web-kit?

For my example, is there a way to change the red ball to a different color...

JSFIDDLE: http://jsfiddle.net/BkFBH/3/

HTML:

<img id = "ball" src="http://www.clker.com/cliparts/p/0/L/e/j/B/red-circle-solid-md.png" width=100 height=100>

EDIT: I need to change in by HEX or RGBA, not hue! But if there is a conversion from HEX to Hue or similar, that could also work!

Thank you all! -Liam

Answer 1

You can use the hue-rotate CSS3 filter. Change the 120deg to your liking.

#ball {
    -webkit-filter: hue-rotate(120deg);
}

http://jsfiddle.net/BkFBH/4/