如何在透明度的png图像周围添加阴影?
问题描述:
我想为透明度为的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));
它看起来不错,但性能,特别是在浏览器,速度很慢。
我知道的唯一选择是在图像本身内添加阴影,但是阴影具有很大的扩展(因此图像尺寸很大)并且压缩会看起来很糟糕。
还有其他选择/建议吗?
答
由于filter
属性此刻被认为是实验性的,所以我不会指望它非常快。我甚至不希望它能够在每个浏览器上都能正常工作(我正在与你交谈,Internet Explorer!)。所以我建议现在就避免使用这些功能。
那么,你可以做什么?在我看来,有两种选择,取决于你的图像是怎样的。
1)您可以将其设置为SVG图像并添加阴影。欲了解更多信息,请阅读this question。
2)或者,如果png文件对SVG来说过于复杂,则可以使用Photoshop或paint.NET等工具在图像本身中添加阴影。
[在CSS中放置阴影的PNG图像]可能的重复(https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css) –