CSS - 透明 png 与 Photoshop 图层类型答案

【问题标题】：CSS - transparent pngs vs Photoshop layer typesCSS - 透明 png 与 Photoshop 图层类型
【发布时间】：2020-04-14 02:40:39
【问题描述】：

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

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

有什么办法可以解决吗？

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

简短回答：不。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：