是否可以对 PNG 的内容进行投影？
不是正方形，而是一个对象投影
作用于 PNG 的非透明内容。
【问题讨论】：
标签： css image transparency shadow css-filters
绝对有可能。
使用过滤器，示例：
img {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
【讨论】：
在它对 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 并设置attribute class="divOriginal common"，另一个设置为class="divShadow common"。
结果应该是：
干杯！
阿迪
【讨论】：
使用 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;
【讨论】：
【讨论】：
根据 Chris Morgan 关于画布的建议，我为此编写了一个 jQuery 插件。你可以在 GitHub 上找到它：https://github.com/Kukunin/image-shadow
【讨论】：
在 CSS 中无法做到这一点。然而，通过画布完成它是完全可能的，但它会有些低效（因为它每次都由客户端处理）并且将依赖于 JavaScript。在 PNG 中执行此操作会更容易，并且可以在更多浏览器上使用。
如果您想了解更多信息，请在网上搜索“html canvas blur”和“html canvas load image”等内容。或者更好的是，使用可以做到这一切的画布阴影功能。
这是一个例子：http://philip.html5.org/demos/canvas/shadows/various.html
context.shadow(Color|OffsetX|OffsetY|Blur)
context.drawImage的img标签加载PNG
还有一个奖励：
context.toDataURL（制作一个将 PNG 放入其中的网络应用程序，它会为您提供阴影！）【讨论】：