Is there a way to mimic photoshop's overlay filter with CSS?

The overlay blend alters the color of the image on top, as opposed to just altering the transparency. Is there a way to mimic this with CSS? Just exporting a photoshop image with the layer set to overlay and placing it over a background on the开发者_如何学运维 web page doesn't work.

It can't be done with pure css, but it can be done with javascript. Check out Pixastic's blend function, it has ~20 blending methods that match those in photoshop.

Note: this answer has become less accurate over the years. The mix-blend-mode attribute now works across most browsers, and pixastic seems to have disappeared.

I'm late to the party, but there is now a mix-blend-mode css property that applies blend mode to an entire element which takes into account the elements below.

now you can do it with CSS but only in modern browser, try background-blend-mode: multiply; it blend the background-image of an element with its background-color.