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
精彩评论