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

Question

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

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

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

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

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

Answer 1

是!可以在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

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

这里有很好的干净来源：

http://philip.html5.org/demos/canvas/shadows/various.html