开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜