有没有人知道用图像或CSS来复制Photoshop的乘法图层模式的好方法?
我正在开发一个项目，当你悬停在缩略图上时会出现颜色叠加，但设计师使用了一个设置为“乘法”的图层，我无法想出如何在网页上实现它。
我想到的最好的方法是使用rgba或透明png，但即使这样也看起来不正确。
8个回答
23
现在有一些新的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
启用这些样式后，查看此代码片段: http://jsfiddle.net/cqzJ5/ (如果您的浏览器已正确启用样式，则两个图像应混合在一起，使场景看起来像是在水下)
尽管目前对此功能的支持几乎不存在，这可能不是最合法的答案，但我们可以希望现代浏览器将在不久的将来采用这些属性，为我们提供一个非常好的且简单的解决方案。
关于混合模式和CSS属性的更多阅读资源:
- Blake Mann
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);
}
- tnt-rox
1
1这个方法在浏览器支持方面怎么样？ - Andrew Philpott
17
仅供参考，这位开发者正在开发一个库来实现这一点。我在研究过程中了解到了这个库，但尚未尝试过。
- Tolomelli
11
如果你掌握诀窍，就可以用24.png实现这个功能。
在Illustrator中，您可以将图形导出为24.png，但似乎从未像multiply一样起作用。
我找到了一个方法。
- 获取单独的多重图形
- 在其后面放置一个纯黑色100%框，并选择两个图形
- 在透明度窗口中选择“制作蒙版”，然后选择“反转蒙版”
- 导出为24.png文件
当z-index(ed)位于图片顶部时，它的效果就像multiply一样。
- user1861969
2
+1并不能完全达到乘法的效果，但非常接近！感谢这个。 - Larry
2很想在网上看到这方面的实例。 - jhanifen
9
没有这样的能力可用。你能获得的仅仅是：
在 HTML5
<canvas>上使用lighter合成模式（它是 a+b，而不是 a*b，且与“相乘”相反）IE 中的
min或subtractCompositor滤镜。
两者都不是实际可行的。
通常情况下，你不应尝试将 Photoshop comps 导出为层，而是将它们渲染为单个不透明图像。对于滚动鼠标，你可以制作两张图片（一张用于正常状态，一张用于悬停状态），并使用 CSS 的 :hover 样式来选择不同的背景图片，或者更好的方法是——将两张图片合并为一张，并使用 background-image/background-position 来在每个状态下显示正确的图像部分作为背景图像（“CSS sprites”）。
- bobince
1
是的，我考虑过使用精灵图，但这并不实际，因为客户将发布新条目，而且没有访问 Photoshop 或类似软件的权限。 - Andrew Philpott
5
我最近需要做的正是OP所要求的，因此我进行了搜索。我发现用Photoshop制作透明PNG可以很好地复制乘法效果。
以下是具体步骤：
1. 创建一个与你的乘法图层相同尺寸的新文档。 2. 用黑色填充文档。 3. 添加矢量蒙版（在图层窗口底部“fx”左侧的图标）。 4. 在蒙版本身上
所有功劳归Sojeong所有：https://superuser.com/questions/381704/multiply-blending-mode-to-png
以下是具体步骤：
1. 创建一个与你的乘法图层相同尺寸的新文档。 2. 用黑色填充文档。 3. 添加矢量蒙版（在图层窗口底部“fx”左侧的图标）。 4. 在蒙版本身上
Alt/Option + 单击。
5. 现在将你的乘法图层复制并粘贴到蒙版中。
6. Cmd/Ctrl + i反转刚刚粘贴的图层。
7. 在这个图层下面创建一个新图层，并将图片添加到乘法叠加层后面。
8. 一切应该看起来与你想要的结果非常接近。如果需要，可以调整我们创建的蒙版图层的opacity。
9. 当它看起来不错时，只需切换底层的可见性并将蒙版图层保存为PNG即可！所有功劳归Sojeong所有：https://superuser.com/questions/381704/multiply-blending-mode-to-png
- cfx
3
请看这个链接：http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html
按照这些指示，我成功地在黑色背景上加了水印（我的情况是墨水画，在纯白背景上有黑色和灰色）。实际上，它与Adobe的真正Multiply滤镜几乎没有区别。
我使用Photoshop的指令将白色从图像中删除，只留下黑色和灰色，并保存为PNG格式。然后用CSS/HTML将其放在木板上，但效果比multiply仍然差很多。但是通过强烈减少PNG的亮度解决了这个问题（之前，浅灰色的地方显眼丑陋）。
一般来说，我建议你在Photoshop中尝试不同操作，模拟网络情况：一个半透明（没有特殊东西）的图层放在实心背景上。以上提到的教程可能会帮助你复制出multiply或其他花哨的效果。
我使用Photoshop的指令将白色从图像中删除，只留下黑色和灰色，并保存为PNG格式。然后用CSS/HTML将其放在木板上，但效果比multiply仍然差很多。但是通过强烈减少PNG的亮度解决了这个问题（之前，浅灰色的地方显眼丑陋）。
一般来说，我建议你在Photoshop中尝试不同操作，模拟网络情况：一个半透明（没有特殊东西）的图层放在实心背景上。以上提到的教程可能会帮助你复制出multiply或其他花哨的效果。
- Bart Van Hove
1
优秀的教程。优秀的解决方法：只需调整图像的透明度，就可以避免“乘层”成为问题。（还有非常出色的Photoshop知识。）非常感谢您的发布！ - JohnK
0
不确定你是否会有什么好运气。据我所知，即使你尝试使用一些高级的JavaScript进行集成，也不可能实现。
- kilrizzy
2
可能只需要两个带有鼠标悬停状态的图片。 - kilrizzy
是的，我也没有找到任何JavaScript解决方案。最终我只使用了一个基于CSS的半透明覆盖层。虽然它不是完全相同的外观，但这是我能够得到的最接近的效果，因为在这种情况下使用基于图像的翻转效果并不会真正起作用。 - Andrew Philpott
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
z-index吗？这里有一个使用z-index进行图层排序的示例：http://jsfiddle.net/ZDroid/VWMMu/ - user1261322