css - 如何复制PS多层模式

Question

有人知道使用图像或 CSS 复制 Photoshop 的多层模式的好方法吗？

我正在开发一个元素，该元素的缩略图会在您将鼠标悬停在缩略图上时获得颜色叠加层，但设计师使用图层集进行叠加，但我无法弄清楚如何在网络上制作它。

我想到的最好的方法是使用 rgba 或透明的 png，但即便如此它看起来也不正确。

Answer 1

引入了新的 CSS 属性来做这件事，它们是 blend-mode 和 background-blend-mode。

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

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

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

启用那些坏男孩，然后检查这个 fiddle :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/