我正在做一个项目，有一个缩略图，当你悬停在他们上面时，得到一个彩色叠加，但设计师使用一个层设置乘法，我不知道如何在网上生产它。
我想出的最好的事情是使用rgba或透明的png，但即使这样看起来不正确。
解决方法
目前，您将无法在任何类型的生产环境中使用它们，因为它们非常新，目前只有Chrome Canary(实验性网络浏览器)支持。 Webkit每夜。
这些属性被设置为几乎与photoshop的混合模式完全相同，并且允许将各种不同的模式设置为这些属性的值，例如覆盖，屏幕，减轻，颜色闪避，以及当然倍增等。 。
混合模式将允许图像(和可能的内容？我没有听到任何建议，在这一点虽然。)分层在彼此的顶部，以应用这种混合效果。
背景混合模式将是相当类似，但将打算用于背景图像(使用背景或背景图像设置)，而不是实际的图像元素。
编辑：
下一部分变得有点不相关，因为浏览器支持正在增长..检查这个图表，以查看哪些浏览器支持这个：http://caniuse.com/#feat=css-backgroundblendmode
如果您的计算机上安装了最新版本的Chrome，您可以通过在浏览器中启用某些标记来查看这些样式(只需将这些标记放入您的地址栏:)
chrome://flags/#enable-experimental-web-platform-features chrome://flags/#enable-css-shaders * note that the flags required for this might change at any time
启用那些坏男孩，然后检查这个小提琴：http://jsfiddle.net/cqzJ5/
(如果在浏览器中正确启用样式，则两个图像应混合以使场景看起来像是在水下)
虽然这可能不是当前最合理的答案，由于几乎完全不存在对此功能的支持，我们可以希望现代浏览器将在不久的将来采用这些属性，给我们一个非常好的和容易的解决方案这个问题。
关于混合模式和css属性的一些额外的阅读资源：
> http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
> http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
> http://html.adobe.com/webplatform/graphics/blendmodes/
