Is there any way to have an image on a web page apply a hue transformation to what's behind it?
Imagine I had an image of the Japanese flag, on top of a map which is mostly black on white. The text covered by the red circle would be black on red. The text covered by the white part of the flag would look normal.
Using 50% opacity on the flag would result in a grey text on pink, which is less desirable.
Even if there are wacky and not universally supported methods, I'd be interested, as long as I can do it on webkit (Safari, mobile Safari, and Chrome).
According to caniuse.org (http://caniuse.com/#feat=css-backgroundblendmode) CSS blending is not supported in Safari or iOS.
If possible, it would be best to handle the effect in Photoshop and save it out the effect as an image. If that is not possible, the only alternative I see is to use a Canvas element (http://codepen.io/adobe/full/nmfic). If you search for Canvas blending modes you'll find plenty of information about it.