如何复制PS乘法层模式

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

我正在制作一个缩略图的项目，当你将鼠标hover在他们上面时，会有一个颜色叠加层，但是devise者使用了一个图层集合，我无法弄清楚如何在networking上生成它。

我提出的最好的事情是使用rgba或透明PNG，但即使如此，它看起来不正确。

Answer 1

有新的CSS属性被引入做这件事情，他们是blend-mode和background-blend-mode 。

目前，你不能在任何生产环境中使用它们，因为它们是非常新的，目前只有Chrome Canary（实验性networking浏览器）和Webkit Nightly才支持。

这些属性的设置与Photoshop的混合模式几乎完全一样，并允许将各种不同的模式设置为这些属性的值，例如overlay ， screen ， lighten ， color-dodge ，当然还有其他方法。 。

blend-mode将允许图像（也可能是内容？我还没有听到任何build议，在这一点上，但是）层叠在一起，以应用这种混合效果。

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/ （如果风格在浏览器中正确启用，应该混合两个图像，使场景看起来像在水下）

虽然这可能不是目前最合理的答案，因为几乎完全不存在对这个特性的支持，但是我们可以希望现代浏览器在不久的将来会采用这些特性，给我们提供一个非常好的和简单的解决scheme来解决这个问题。

一些额外的阅读资源混合模式和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/

Answer 2

只是为了logging，这家伙正在开发一个图书馆这样做。 我刚刚进行研究，还没有尝试过。

https://github.com/Phrogz/context-blender

Answer 3

简单一点的SVG：

 <svg width="200" height="200" viewBox="10 10 280 280"> <filter id="multiply"> <feBlend mode="multiply"/> </filter> <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" /> </svg> 

和一些CSS：

 #kitten:hover { filter:url(#multiply); } 

小提琴： http : //jsfiddle.net/7uCQQ/381/

Answer 4

24.png是可能的 – 如果你知道这个技巧。

在插图画家，你可以导出graphics为24.png，但这似乎从来没有像繁殖一样工作。

我已经find了。

1. 自行获取您的乘法graphics
2. 在其后面放置一个纯黑色的100％框，然后select两个graphics
3. 在透明度窗口中select“制作蒙版”，然后select“反转蒙版”
4. 导出为24.png文件

当在图片顶部的z-index（ed）时工作就像一个乘法运算。

Answer 5

没有这样的能力可用。 你得到的唯一的合成选项更接近：

• HTML5 <canvas> （这是a + b不是a * b，具有与乘法相反的效果）

• min或仅在IE中subtract Compositorfilter。

两者都不实际。

一般来说，您不应该尝试将Photoshop复合图像导出为图层，而是将其渲染为单个不透明的图像。 对于翻转，您可以制作两个图像（一个用于正常状态，一个用于hover），并使用CSS :hover样式select不同的背景图像，或者更好，因为它不需要预加载并减lessHTTP请求，图像合成为一个，并使用background-image / background-position在每个状态下显示该图像的右侧部分作为背景图像。 （“CSS精灵”）

Answer 6

我最近有必要做OP所要求的，所以我search了一下。 我发现了一个很好的方法来通过在Photoshop中制作透明的PNG来复制乘法效果。

1. 创build一个与您的乘法图层尺寸相同的新文档。
2. 用黑色填充文档。
3. 添加一个vector蒙版（层窗口底部图层“fx”左侧的图标）。
4. Alt/Option + click面具本身。
5. 现在复制并粘贴乘法图层到面具。
6. Cmd/Ctrl + i来反转刚刚粘贴的图层。
7. 在此图层下创build一个新图层，并将图像添加到乘法叠加后面。
8. 一切都应该看起来非常接近你想要的结果。 如果需要，您可以调整我们创build的蒙版图层的opacity 。
9. 当它看起来不错，只需切换底层的可见性，并保存蒙版图层作为PNG等瞧！

所有功劳都来自Sojeong从https://superuser.com/questions/381704/multiply-blending-mode-to-png

Answer 7

看看这个： http : //www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

使用这些说明，我在黑白图像（在我的情况下是墨迹绘图，黑色和灰色在纯白色的背景上）上水印黑色背景（在我的情况下为木头）上取得了巨大的成功。 与Adobe的真正的Multiplyfilter几乎没有任何区别。

我使用Photoshop指令从我的图像中删除白色，在透明背景上只留下黑色和灰色。 把这个保存到PNG中，并把它放在CSS / HTML的木头上看起来还不如多，但是强烈地降低了PNG的亮度解决了它（浅灰色突出了，使它变丑）。

一般来说，我build议你在Photoshop中玩耍，复制networking的情况：一个半透明（没有特别的东西）层在坚实的背景之上。 上面的教程可能会让您重现繁复或其他奇特的效果。

Answer 8

不知道你是否会有运气。 据我所知，即使您尝试将一些先进的JavaScript与它集成，也是不可能的。