可以在透明背景PNG图像上创建css阴影吗？

任何人都知道它是否可以在透明背景PNG图像上创建基于CSS的投影？

也许与CSS3，jquery或最后服务器端？

在我试图实现的效果之后的示例：

很确定是否可能它不是跨浏览器但是如果它降级很好就愿意申请？

随意添加您的输入，开放技术讨论..

Answer 1

如果将图像加载到canvas上下文中，则可以执行此操作。

这里干净的来源：

http://sofzh.miximages.com/jquery/pp 是！ 可以在CSS3中的透明.png上做阴影！ 我需要在一个在IE10中显示垃圾的项目中使用它。 而不是使用box-shadow，请使用filter：drop-shadow（）。 语法几乎相同。 这是文章： 链接

最终的解决方案就是这个（如果链接中断）：

.filter-drop-shadow { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } 

Answer 2

我知道可以使用GD PHP库。 看看这个教程：

http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/

我猜想使用PHP解决方案将是跨浏览器最兼容的。

Answer 3

CSS不知道图像的形状是什么，因此无法确定轮廓并且无法对其应用阴影。

您可以使用z-index，方向偏移和一些不透明度创建图像的黑色副本并将其放在后面。 就是这样。

Answer 4

不，这是不可能的。 即使背景是透明的，您的图像仍然是一个矩形，阴影将应用于周围的边框。

你可以做的是将图形阴影直接放在png中。 这在透明的背景下效果很好。