Overlay Image with New Color

So here is my issue:

I have a two-tone png image. One tone is black, one tone is transparent.

I am currently using the background color attribute to change the color of the transparent section dynamically.

I would also like to be able to change the black section dynamically using a mask overlay. I assume this is possible in html5 canvas, and possibly css, but I have been una开发者_高级运维ble to find a working answer.

Thank you for your help.

---

At this point, webkit (and only webkit) can do it with pure CSS. It's really, really, really not supported.

A couple links to get you started, should you be interested:

• http://www.webkit.org/blog/181/css-masks/
• http://trentwalton.com/2011/05/19/mask-image-text/

---

I hope I have understood you correctly.

You can use the html5 element canvas to manipulate images right down to individual pixels.

Try this site for reference:

http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/

---

Well, canvas is supported by most modern browsers, if you can take jquery as a solution. You can try this jquery plugin.

the command is pretty straightforward and as easy as:

$("#myImageID").tancolor();

There's an interactive demo. You can play around with it.

Check out the documentation on the usage, it is pretty simple. docs