是否可能在PNG文件的内容上设置投影效果?
不是矩形,而是应用于PNG文件中非透明内容的物体投影效果。
是否可能在PNG文件的内容上设置投影效果?
不是矩形,而是应用于PNG文件中非透明内容的物体投影效果。
这肯定是可能的。
使用过滤器,示例:
img {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
在CSS中无法实现这个功能。但是,通过画布(canvas)完全可以实现,但这会有些低效(因为每次都要由客户端处理),并且需要JavaScript的支持。在PNG中完成将更加容易,并且可以适用于更多的浏览器。
如果您想获取更多信息,请搜索“html canvas模糊”和“html canvas加载图像”等内容。或者更好的方法是使用画布阴影功能,它可以做到所有这些。
下面是一个示例:http://philip.html5.org/demos/canvas/shadows/various.html
context.shadow(Color|OffsetX|OffsetY|Blur)
context.drawImage
从img标记加载PNG还有一个奖励:
context.toDataURL
(制作一个Web应用程序,在其中放置PNG即可生成阴影!)。在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
我已经为此编写了一个基于canvas的jQuery插件,这是基于Chris Morgan的建议。您可以在GitHub上找到它:https://github.com/Kukunin/image-shadow
请使用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;