你能否使用CSS为PNG内容添加非正方形的投影效果？

Question

是否可能在PNG文件的内容上设置投影效果？

不是矩形，而是应用于PNG文件中非透明内容的物体投影效果。

- Kirk Strobeck

---

最好在PNG文件本身中完成这个操作，而不是在CSS中进行操作。 - vcsjones

不是因为更好，而是这是唯一的方法。如果可能的话，这会很酷。 - Wesley Murch

@Wesley：使用超级绝妙的画布动力™ 完全是可能的。 - Chris Morgan

@ChrisMorgan：转成.png格式？有链接吗？我很想看看！ - Wesley Murch

@vcsjones 有时它们仍然很有用。如果你从另一个角度看 - 微软曾经尝试实现一些 CSS3 功能，而这些功能现在我们才能使用多年。可惜它从未变得更加稳定和优化。 - easwee

Answer 1

这肯定是可能的。

使用过滤器，示例：

img { 
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}

- Slake

---

这篇文章(http://demosthenes.info/blog/600/Creating-a-True-CrossBrowser-Drop-Shadow-Effect-With-CSS3-&-SVG)详细介绍了如何在各种浏览器中实现投影效果，因为目前这种方法只适用于Webkit浏览器。 - Blazemonger

Answer 2

在CSS中无法实现这个功能。但是，通过画布(canvas)完全可以实现，但这会有些低效(因为每次都要由客户端处理)，并且需要JavaScript的支持。在PNG中完成将更加容易，并且可以适用于更多的浏览器。

如果您想获取更多信息，请搜索“html canvas模糊”和“html canvas加载图像”等内容。或者更好的方法是使用画布阴影功能，它可以做到所有这些。

下面是一个示例：http://philip.html5.org/demos/canvas/shadows/various.html

• 从画布(canvas)创建上下文(context)
• 根据需要设置context.shadow(Color|OffsetX|OffsetY|Blur)
• 使用context.drawImage从img标记加载PNG
• 啊！阴影出现了！

还有一个奖励：

• 如果您想导出为PNG，则可以使用context.toDataURL(制作一个Web应用程序，在其中放置PNG即可生成阴影!)。

- Chris Morgan

---

那确实是一些非常酷的东西，虽然不是 CSS 解决方案。（暗示加1） - Wesley Murch

@Wesley：哈哈，CSS？被高估了。;-) - Chris Morgan

Answer 3

时代在变化。如今，在一些浏览器中可以使用CSS滤镜来实现，就像当前被接受的答案所展示的那样。 （点击查看支持该功能的浏览器）

---

不能使用CSS来实现以下效果：

我猜这就是你要求的效果。

- thirtydot

Answer 4

在CSS支持之前，您可以尝试我的方法。

我的示例使用了这张图片：

因为它有透明的背景并且不是正方形（对于CSS的box-shadow来说很重要）。虽然不太花哨，但足以完成这个简单的教程。

接下来我创建了另一张基于上面那张图片的图像，将其放置在原始图片下方。

步骤1. 添加模糊效果：

步骤2. 去掉亮度和对比度：

现在我有了原始图片和阴影。

接下来，我将把它显示成阴影的样子：

样式：

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

做些魔法:

添加一个div并设置属性class="divOriginal common"，另一个设置class="divShadow common"。

结果应该是:

干杯！

Adi

- AdiKonstantin

Answer 5

我已经为此编写了一个基于canvas的jQuery插件，这是基于Chris Morgan的建议。您可以在GitHub上找到它：https://github.com/Kukunin/image-shadow

- Kukunin

---

太好了！而且还有Chrome的修复！ - psycho brm

Answer 6

请使用createjs。示例可在 JSFiddle中找到。

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;

- Hoy Cheung