css - 如何在具有透明度的 png 图像周围添加阴影？

Question

我想给 透明的 png 添加阴影。

这意味着框阴影自动消失 - 阴影是矩形的/围绕图像的边界框。

还尝试了投影:

-webkit-filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4));
filter: drop-shadow(0px 0px 250px rgba(255, 255, 255, 0.4));

它看起来不错，但性能非常慢，尤其是在 Chrome 上。

我知道的唯一替代方法是在图像本身内添加阴影，但是阴影分布范围很广(因此图像尺寸很大)并且压缩后看起来会很糟糕。

还有其他选择/建议吗？

Answer 1

自 filter属性(property)目前被认为是实验性的，我不希望它很快。我什至不希望它适用于所有浏览器(我在和你说话，Internet Explorer!)。所以我建议暂时避免使用这些功能。

那么，你能做什么？在我看来，有两种选择，具体取决于图像的外观。

1) 您可以将其设为 SVG 图像并添加阴影。有关这方面的更多信息，请阅读 this question .

2) 或者，如果 png 文件对于 SVG 来说太复杂，您可以使用 Photoshop 或 paint.NET 等工具在图像本身中添加阴影。