问题
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.
回答1:
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.
回答2:
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.
回答3:
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.
来源：https://stackoverflow.com/questions/6587272/is-there-a-way-to-mimic-photoshops-overlay-filter-with-css