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



我想为具有透明度的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上,非常慢。

我知道的唯一选择是在图像本身中添加阴影,但是阴影的扩散范围很广(因此图像尺寸很大),并且压缩后看起来会很糟糕。

还有其他选择/建议吗?

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

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

1)您可以将其设为SVG图像并添加投影。有关此内容的更多信息,请阅读此问题。

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

最新更新