你可以添加一个非正方形阴影的PNG内容与CSS？

是否可以对PNG的内容进行投影？

不是一个正方形 ，而是一个物体投影
作用于PNG的不透明内容。

Answer 1

这绝对有可能。

使用filter，示例：

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

Answer 2

在CSS中这是不可能的。 但是，通过canvas可以做到这一点，但是效率会比较低（因为每次客户端都会处理它），并且会依赖于JavaScript。 在PNG中操作会更容易，并且可以在更多的浏览器上工作。

如果你想了解更多的信息，可以在网页上search“html canvas blur”和“html canvas load image”。 或者更好的是，使用可以做到这一切的canvas阴影function。

这是一个例子： http : //philip.html5.org/demos/canvas/shadows/various.html

• 从canvas创build上下文
• 根据需要设置context.shadow(Color|OffsetX|OffsetY|Blur)
• 使用context.drawImage从img标签载入PNG
• 啊！ 阴影！

还有一个好处：

• 使用context.toDataURL如果你想导出到PNG（做一个networking应用程序，你放弃PNGs，它会给你阴影！）

Answer 3

时代如何变化 现在可以在一些浏览器中使用 ，如当前接受的答案所示。

---

使用CSS无法做到这一点：

这就是我所假设的你所要求的。

Answer 4

直到它可以用于CSS，你可以尝试我的方法。

我的例子使用这张图片：

因为它有一个透明的背景，而且不是方形的（对于CSS的box-shadow来说）。 这不是很花哨，但服务这个小而简单的教程罚款。

我下一步是创build另一个基于上面的图像，把它放在原来的。

步骤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，并设置attribute class="divOriginal common ”，另一个class="divShadow common" 。

结果应该是：

干杯!

阿迪

Answer 5

为此，我写了一个jQuery插件，基于Chris Morgan关于canvas的build议。 你可以在GitHub上find它： https ： //github.com/Kukunin/image-shadow

Answer 6

在JSFiddle中可以使用createjs样本

 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;