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

Question

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

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

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

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

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

Answer 1

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

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

.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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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