css - CSS - 透明 png 与 Photoshop 图层类型

Question

我刚刚创建了 Photoshop 模型，所有阴影和高光层都设置为“叠加”而不是“正常”。

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

有没有办法修复它？

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

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

PS叠加与.png

score 2 · Accepted Answer

简短的回答：没有。

长答案：您有两个选择，它们都不涉及在 CSS 中执行此操作：

使用其中一个 JavaScript 插件，该插件将通过一些复杂的计算复制这些函数（一个示例可以在 Vladimir Volek 对原始问题留下的评论中找到： Is there a way to mimic photoshop's overlay filter with CSS?）。
通常可以在 Photoshop 中使用不同的（并且更耗时的、逐个案例的方法）重新创建这些效果。我通常会问设计师，如果他们有时间，他/她是否可以回去重新做，如果没有，我会花太多时间自己做。我讨厌将 JS 用于这种愚蠢的表现形式。

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

3 回答 3