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

时间:2017-10-10 13:16:55

标签: css css3 shadow dropshadow

我想为 pngs添加阴影

自动这意味着盒子阴影出来 - 阴影是矩形/围绕图像的边界框。

还尝试了drop-shadow:

-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上的性能非常慢。

我所知道的唯一替代方法是在图像中添加阴影,但阴影的扩散范围很大(因此图像尺寸很大),压缩后看起来很糟糕。

还有其他选择/建议吗?

1 个答案:

答案 0 :(得分:0)

由于filter属性目前被认为是实验性的,我不希望它的速度非常快。我甚至不希望它适用于所有浏览器(我正在与你交谈,Internet Explorer!)。所以我建议暂时避免使用这些功能。

那么,你能做什么?在我看来,有两种选择,取决于你的图像的样子。

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

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