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

有人知道是否有可能在透明背景PNG图像上创建基于css的阴影吗

可能是CSS3、jquery还是服务器端

我试图达到的效果后的示例：

很确定，如果有可能，它不会是跨浏览器的，但如果它退化得很好，是否愿意应用

---

请随意添加您的输入，打开技术讨论。

CSS不知道图像的形状，因此无法确定轮廓，也无法对其应用阴影

---

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

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

---

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

我知道使用GD PHP库是可能的。查看本教程：

---

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

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

好的清洁来源：

---

是的！可以在CSS3中的透明.png上进行阴影处理！我在一个项目中需要这个，这个项目在IE10中显示得像垃圾一样。使用filter:drop-shadow（）代替box shadow。语法基本相同。以下是文章：

最终解决方案如下（如果链接中断）：

---

我无法想象这是可能的。浏览器如何知道图像的遮罩是用来投射阴影的？这难道不是教程中的图像吗？这不正是你在这里要求的吗？可能的重复：在我使用两个图像只在png中生成阴影之前，我直接在png中生成更好的阴影。是的，在这一点上真的没有区别。但是，您无法在客户端解决此问题。您需要考虑服务器端解决方案。@我想您可以将图像作为blob并使用javascript处理数据，因此我不会说“不能”，但更可能的是“不想”…）好吧，你可以把它拉到画布上，从那里确定形状，但是你已经写了一个完整的插件。不再完全是CSS了（但这是个好主意）。a我找到了！使用filter:drop-shadow（）代替box 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));
}