Question

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

我正在研究一个项目，当你将鼠标悬停在它们上方时，它们会有缩略图显示颜色叠加，但是设计师使用了一个图层集来繁殖，我无法弄清楚如何在网上制作它。

我提出的最好的事情是使用rgba或透明的png，但即使这样看起来也不正确。

Answer 1

有一些新的CSS属性可以用来做这件事，它们是blend-mode和background-blend-mode。

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

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

multiply会允许图像（也可能是内容？我现在还没有听到任何暗示的内容。）相互叠加以应用此混合效果。

blend-mode非常相似，但会用于背景图片（使用background-blend-mode或background设置）而不是实际的图片元素。

修改随着浏览器支持的增长，下一部分变得有点无关紧要。查看此图表以查看哪些浏览器支持此功能：http://caniuse.com/#feat=css-backgroundblendmode

如果您的计算机上安装了最新版本的Chrome，您实际上可以通过在浏览器中启用一些标记来查看这些样式（只需将这些标记放入您的地址栏中）：

background-image

启用那些坏男孩，然后查看这个小提琴：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/

Answer 2

简单的一点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 3

只是为了记录，这家伙正在开发一个库来实现这一目标。我在做研究时刚刚进入研究阶段，尚未尝试过。

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

Answer 4

如果你知道诀窍，可以使用24.png。

在插图画家中，您可以将图形导出为24.png，但这似乎不会像乘法一样。

我找到了。

自行获取成倍增加的图片
在其后面放置一个纯黑色100％框，然后选择两个图形
在透明度窗口中选择“制作面具”，然后选择“反转面具”
导出为24.png文件

就像在图片顶部的z-index（ed）时的乘法一样。

Answer 5

没有这样的能力。您获得的唯一合成选项是：

lighter HTML5上的合成模式<canvas>（+ b不是a * b，与乘法有相反的效果）
min或subtract Compositor过滤器。

两者都不实用。

通常，您不应尝试将Photoshop comps导出为图层，而应将其渲染为单个不透明图像。对于翻转，您可以制作两个图像（一个用于正常状态，一个用于悬停），并使用CSS :hover样式在它们之间进行交换以选择不同的背景图像，或者更好，因为它不需要预加载并减少HTTP请求 - 将两个图像合二为一，并使用background-image / background-position在每个状态中将该图像的右侧部分显示为背景图像。（“CSS sprites”）

Answer 6

我最近需要做OP所要求的，所以我搜索了一下。我找到了一种通过在Photoshop中制作透明PNG来复制乘法效果的好方法。

使用相同的乘法尺寸创建一个新文档层。
用黑色填充文档。
添加矢量蒙版（图层窗口底部图层“fx”左侧的图标）。
Alt/Option + click。
现在将您的乘法图层复制并粘贴到蒙版中。
Cmd/Ctrl + i反转刚刚粘贴的图层。
在此图层下方创建一个新图层，并将图像添加到乘法叠加层后面。
一切都应该看起来非常接近你想要的结果。如果需要，您可以调整我们创建的蒙版图层的opacity。
当它看起来不错时，只需切换底层的可见性并将遮罩层保存为PNG等等！

所有功劳都来自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的真实Multiply过滤器几乎没有任何区别。

我使用Photoshop指令从图像中删除白色，只在透明背景上留下黑色和灰色。保存到PNG并将它放在CSS / HTML的木头上看起来仍然比看起来更糟糕，但强烈降低PNG的亮度解决了它（之前的光灰色突出，让它变得难看）。

一般情况下，我建议你在photoshop中玩游戏，复制网络情况：在纯色背景上的半透明（无特殊东西）层。如上所述的教程可能允许您重现多重或其他花哨的效果。

Answer 8

不确定你是否会有运气。据我所知，即使你试图用它集成一些高级JavaScript也不可能。

如何复制PS乘法图层模式

8 个答案: