CSS 如何复制PS多层模式

How to replicate PS multiply layer mode

提问by Andrew Philpott

Does anybody know of a good way to replicate Photoshop's multiply layer mode using either an image or CSS?

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

I'm working on a project that has thumbnails that get a color overlay when you hover over them, but the designer used a layer set to multiply and I can't figure out how to produce it on the web.

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

The best thing I've come up with is either using rgba or a transparent png, but even then it doesn't look right.

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

采纳答案by Blake Mann

There are new CSS properties being introduced to do just this thing, they are blend-modeand background-blend-mode.

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

Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.

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

These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.

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

blend-modewould allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.

blend-mode将允许图像（和可能的内容？我还没有听到任何暗示在这一点上。）在彼此之上分层以应用这种混合效果。

background-blend-modewould be quite similar, but would be intended for background images (set using backgroundor background-image) rather than actual image elements.

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

---

---

EDIT:The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode

编辑：随着浏览器支持的增加，下一部分变得有点无关紧要。检查此图表以了解哪些浏览器支持此：http: //caniuse.com/#feat=css-backgroundblendmode

---

---

If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)

如果您的计算机上安装了最新版本的 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

Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/(If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)

启用那些坏男孩，然后查看此小提琴：http: //jsfiddle.net/cqzJ5/ （如果在浏览器中正确启用了样式，则应混合两个图像以使场景看起来像是在水下）

While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.

虽然由于几乎完全不支持此功能，目前这可能不是最合理的答案，但我们希望现代浏览器将在不久的将来采用这些属性，为我们提供一个非常好的和简单的解决方案.

Some extra reading resources on blending modes and the css properties:

关于混合模式和 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/

• 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/

回答by tnt-rox

Simple with a bit of SVG:

用一点 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>

and some CSS:

和一些 CSS：

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

The fiddle: http://jsfiddle.net/7uCQQ/381/

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

回答by Tolomelli

Just for the record, this guy is developing a library to do so. I just came into it while doing a research, haven't tried yet.

只是为了记录，这个家伙正在开发一个图书馆来做到这一点。我是在做研究的时候接触到的，还没有尝试过。

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

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

回答by user1861969

It is possible with a 24.png - if you know the trick.

使用 24.png 是可能的 - 如果您知道诀窍。

In illustrator you can export the graphic as a 24.png, but this never seems to work like multiply.

在 illustrator 中，您可以将图形导出为 24.png，但这似乎永远不会像乘法那样工作。

I've found away.

我已经找到了。

1. get your multiplied graphic on its own
2. place a solid black 100% box behind it, and select both graphics
3. in the transparency window select 'Make Mask' and then 'Invert Mask'
4. export as a 24.png file

1. 自行获取您的倍增图形
2. 在其后面放置一个纯黑色 100% 框，然后选择两个图形
3. 在透明窗口中选择“制作蒙版”，然后选择“反转蒙版”
4. 导出为 24.png 文件

works just like a multiply when z-index(ed) on top of a picture.

当 z-index(ed) 在图片顶部时，就像乘法一样。

回答by bobince

No such ability is available. The only compositing options you get that are even close are:

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

• lightercompositing mode on an HTML5 <canvas>(which is a+b not a*b, and has about the opposite effect to multiply)

• minor subtractCompositorfilters in IE only.

• lighterHTML5 上的合成模式<canvas>（a+b 不是 a*b，与相乘的效果相反）

• min或subtractCompositor仅在 IE 中过滤。

Neither are really practical.

两者都不太实用。

In general you should not attempt to export Photoshop comps as layers, but render them down to a single opaque image. For rollovers you can make two images (one for normal state, one for hovered) and swap between them using the CSS :hoverstyle to choose a different background image, or—better, as it requires no preloading and reduces HTTP requests—combine both images into one and use background-image/background-positionto display the right part of that image in each state as a background image. (“CSS sprites”)

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

回答by cfx

I recently had the need to do exactly what the OP asked so I searched around. I found a great way to replicate the multiply effect by making a transparent PNG in Photoshop.

我最近需要完全按照 OP 的要求去做，所以我四处搜索。我找到了一种通过在 Photoshop 中制作透明 PNG 来复制倍增效果的好方法。

1. Create a new document with the same dimensions of your multiply layer.
2. Fill the document with black.
3. Add a vector mask (the icon to the left of layer "fx" at the bottom of the layers window).
4. Alt/Option + clickon the mask itself.
5. Now copy and paste your multiply layer into the mask.
6. Cmd/Ctrl + ito invert the layer you just pasted.
7. Create a new layer below this layer and add the image behind the multiply overlay.
8. Everything should look pretty close to your desired result. If needed, you can adjust the opacityof the masked layer we created.
9. When it looks good just toggle the bottom layer's visibility and save the masked layer as a PNG et voila!

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

All credit goes to Sojeong from https://superuser.com/questions/381704/multiply-blending-mode-to-png

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

回答by Bart Van Hove

Check this out: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

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

Using those instructions, I had great success watermarking a black-and-white image (ink drawing in my case, with blacks and greys on a solid white background) onto a dark background (wood in my case). There is hardly any difference with the real Multiply filter of Adobe.

使用这些说明，我成功地将黑白图像（在我的情况下是墨水绘图，纯白色背景上有黑色和灰色）水印到深色背景（在我的情况下是木头）。与 Adob​​e 真正的 Multiply 过滤器几乎没有任何区别。

I used the Photoshop instructions to remove the whites from my image, leaving only blacks and greys on a transparent background. Saving this to PNG and putting it on the wood in CSS/HTML still lookedmuch worse thanmultiply, but strongly reducing the brightness of the PNG solved it (the light greys stood out before, making it ugly).

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

In general I recommend you play around in photoshop, replicating the web situation: a semi-transparent (no special stuff) layer on top of a solid background. Tutorials such as the above may allow you to reproduce multiply or other fancy effects.

一般来说，我建议你在 photoshop 中玩一下，复制网络情况：在纯色背景之上的半透明（没有特殊的东西）层。上面的教程可以让您重现乘法或其他奇特的效果。

回答by kilrizzy

Not sure if you will have any luck. As far as I know, it isn't possible even if you tried to integrate some advanced JavaScript with it.

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