您可以使用 CSS 为 PNG 内容添加非方形投影吗？

Can you add a non-square drop shadow to PNG content with CSS?

提问by Kirk Strobeck

Is it possible to do a drop shadow on the content of a PNG?

是否可以在 PNG 的内容上添加阴影？

Not a square, but an object drop shadow that
acts on the non-transparent content of the PNG.

不是一个 square，而是一个对象阴影，
作用于 PNG 的非透明内容。

回答by Slake

It's definitely possible.

绝对有可能。

Using filters,sample:

使用过滤器，示例：

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

回答by Chris Morgan

It's not possible to do that in CSS. However, it's quite possible to do it through a canvas, but it will be somewhat inefficient (as it's processed by the client each time) and will be JavaScript dependent. Doing it in the PNG will be easier and will work on more browsers.

在 CSS 中不可能做到这一点。然而，它很有可能通过画布来完成，但它会有些低效（因为它每次都由客户端处理）并且将依赖于 JavaScript。在 PNG 中这样做会更容易，并且可以在更多浏览器上使用。

If you want more information about it, search the web for things like "html canvas blur" and "html canvas load image". Or better still, use the canvas shadow functionality which can do it all.

如果您想了解更多信息，请在网络上搜索诸如“html canvas blur”和“html canvas load image”之类的内容。或者更好的是，使用可以完成所有操作的画布阴影功能。

Here's an example: http://philip.html5.org/demos/canvas/shadows/various.html

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

• create context from canvas
• set context.shadow(Color|OffsetX|OffsetY|Blur)as desired
• load PNG from img tag with context.drawImage
• ah! the shadows!

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

And a bonus:

还有一个奖励：

• use context.toDataURLif you want to export to PNG (make a web app which you drop PNGs in and it gives you shadows!)

• 使用context.toDataURL，如果你想出口到PNG（让你在下降PNG格式网络应用程序，它为您提供了阴影！）

回答by thirtydot

How times change. It's now possible in some browsers, as shown in the currently accepted answer.

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

---

---

It's not possible to do this using CSS:

使用 CSS 无法做到这一点：

That's what I assume you're asking for.

这就是我假设你要问的。

回答by AdiKonstantin

Until it will be available to CSS, you can try my approach.

在它可用于 CSS 之前，您可以尝试我的方法。

My example uses this picture:

我的例子使用这张图片：

because it has a transparent background and it isn't square (for CSS's box-shadow to get into action). It's not very fancy, but serves this small and simple tutorial fine.

因为它有一个透明的背景并且它不是方形的（为了让 CSS 的 box-shadow 发挥作用）。它不是很花哨，但可以很好地提供这个小而简单的教程。

Next step I took was to create another image, based on the one above, to place it under the original.

我采取的下一步是根据上面的图像创建另一个图像，将其放置在原始图像下方。

Step1. Add blur:

第1步。添加模糊：

Step2. Removed light and contrast:

第2步。去除光和对比度：

So I have the original and the shadow.

所以我有原图和阴影。

Next I will display it as if it is a shadow:

接下来我将它显示为一个阴影：

Style:

风格：

.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;}

Do the magic:

施展魔法：

Add one div and set attribute class="divOriginal common" and another one with class="divShadow common".

添加一个 div 并设置attribute class="divOriginal common" 和另一个带有class="divShadow common".

The result should be:

结果应该是：

Cheers!

干杯!

Adi

阿迪

回答by Kukunin

I've wrote a jQuery plugin for this, based on Chris Morgan's suggestion about canvas. You can find it on GitHub here: https://github.com/Kukunin/image-shadow

根据 Chris Morgan 对画布的建议，我为此编写了一个 jQuery 插件。你可以在 GitHub 上找到它：https: //github.com/Kukunin/image-shadow

回答by Trio Cheung

Use createjs sample can be found at JSFiddle

可以在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;