css 人质mod导入方式,CSS-如何复制PS乘法图层mod

为此引入了新的CSS属性，分别是background-blend-mode和background。

目前，您将无法在任何生产环境中使用它们，因为它们非常新，并且目前仅受Chrome Canary(实验性网络浏览器)和Webkit Nightly支持。

这些属性设置为与Photoshop的混合模式几乎完全相同，并允许将各种不同的模式设置为这些属性的值，例如background-blend-mode、background、background-image、color-dodge，当然还有multiply ..等。

background-blend-mode将允许图像(可能还包含内容？在这一点上我还没有听到任何暗示。)彼此叠加以应用此混合效果。

background-blend-mode将会非常相似，但将用于背景图像(使用background或background-image进行设置)，而不是实际的图像元素。

编辑：随着浏览器支持的增加，下一部分变得无关紧要。检查此图以查看哪些浏览器对此提供支持：[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/Web platform/2013/06/24/CSS-background-blend-modes-are-now-available-in-chrome-canary-安定-WebKit-nightly/]

[HTTP://Demosthenes.info/blog/707/Photoshop-in-the-browser-understanding-CSS-blend-modes]

[HTTP://HTML.Adobe.com/Web platform/graphics/blend modes/]