Question posted in 
If creating a web graphic that’s meant to be used in many places and overlaid on top of other elements, is it possible for the graphic to composite with whatever’s beneath it — like setting a Photoshop layer to be “Difference” — such that its colors invert?
Specifically, picture a “Left” and “Right” image arrow that could be placed on top of an image carousel. Many images could appear beneath it and, if the arrows are lightly colored on a lightly colored image, they may be difficult to see. As such, an image whose color is the difference of what’s behind it would turn dark on a light background.
I’m picturing doing this with an SVG, potentially, but if it could be accomplished with a png or other bitmap of sorts, that’d be neat too.
2
Answers
yes it can, but the support is really poor if you want a CSS only solution. You had the inverse filter on IE versions and now you have Webkit support, but that’s about it. However, you can use JQuery Invert plugin by Paul Irish. It does exactly what you want, and obviously has better support than CSS
If you’re on bleeding edge browsers you have the option of using CSS blend modes, see this tutorial.
For more details, see the specification, which covers html, svg and css.