CSS - 透明pngs与Photoshop图层类型

Question

我刚创建了Photoshop模型和所有阴影＆amp;高亮图层设置为“叠加”而不是“正常”。

在我将它们保存为.png并在我的网站上显示后，它们看起来很糟糕，因为Photoshop使用过滤器而png / css则没有。

有没有办法解决它？

我无法将高亮显示为带有背景的.jpg / .png文件，需要将其保存为半透明.png并使用多种背景技术放置在背景图像上。

任何提示/想法？尝试使用不透明/高光颜色，但仍远没有完美。也许有一些CSS方式？

Answer 1

简答：不。

答案很长：你有两个选择，它们都不涉及在CSS中进行：

1. 使用其中一个将要复制的JavaScript插件 这些函数具有一些复杂的计算（一个例子） 可以在弗拉基米尔·沃莱克留下的评论中找到原文 题： Is there a way to mimic photoshop's overlay filter with CSS?）。
2. 通常可以使用不同的方式重新创建这些效果 （以及更耗时，逐案的方法）在Photoshop中。我通常会问 设计师，如果他们有时间可以回去重新做，并且 如果没有，我会花太多时间自己做。我讨厌 使用JS来表达这样一个愚蠢的表现形式。

Answer 2

有一个解决方案，但在javascript中。在css中无法做到这一点。

http://www.pixastic.com/lib/docs/actions/blend/

Answer 3

我遇到了完全相同的问题......我发现这样做的方法是尝试使用不透明度而不是叠加层重新创建图像。使用上面附加的图像...您可以使用颜色为黑色到透明的渐变工具。将它们应用于新图层，然后将不透明度向下更改，直到您喜欢它为止。然后你可以删除背景并将其保存为png。