51

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

我正在开发一个项目，该项目的缩略图在您将鼠标悬停在其上时会出现颜色叠加，但设计师使用了一个图层设置为相乘，我不知道如何在网络上生成它。

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

4

8 回答 8

23

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

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

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

blend-mode将允许图像（可能还有内容？我目前还没有听到任何建议。）彼此叠加以应用这种混合效果。

background-blend-mode将非常相似，但将用于背景图像（使用backgroundor设置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 属性的额外阅读资源：

于 2014-01-09T04:16:59.037 回答
18

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

于 2014-01-06T06:53:00.973 回答
17

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

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

于 2011-07-12T22:15:15.347 回答
11

24.png 是可能的——如果你知道诀窍的话。

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

我已经发现了。

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

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

于 2012-11-29T03:37:27.323 回答
9

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

  • lighterHTML5 上的合成模式<canvas>（它是 a+b 而不是 a*b，并且具有与乘法相反的效果）

  • min或subtract Compositor仅在 IE 中过滤。

两者都不是真正实用的。

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

于 2010-06-02T15:55:21.000 回答
5

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

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

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

于 2012-12-10T15:13:52.310 回答
3

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

使用这些说明，我成功地将黑白图像（在我的案例中为墨水绘图，在纯白色背景上使用黑色和灰色）添加到深色背景（在我的案例中为木头）上。与 Adob​​e 的真正乘法滤镜几乎没有任何区别。

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

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

于 2012-07-28T16:37:55.183 回答
0

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

于 2010-06-02T15:00:58.497 回答