你能用CSS为PNG内容添加非方形阴影吗？

Question

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

不是正方形,而是
作用于PNG的非透明内容的对象投影.

Answer 1

这绝对是可能的.

使用过滤器,示例:

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

Answer 2

在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)为所需的
• 从img标签加载PNG context.drawImage
• 啊!阴影!

还有奖金:

• 使用context.toDataURL,如果你想出口到PNG(让你在下降PNG格式网络应用程序,它给你的影子!)

Answer 3

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

使用CSS无法做到这一点:

这就是我认为你要求的.

Answer 4

在CSS可用之前,您可以尝试我的方法.

我的例子使用这张图片:

因为它有一个透明的背景而且它不是正方形(对于CSS的盒子阴影来实现).这不是很花哨,但是这个小而简单的教程很好.

我采取的下一步是创建另一个图像,基于上面的图像,将其放在原始图像下.

步骤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".

结果应该是:

干杯!

阿迪