如何使用CSS3在透明的png中给外部发光的对象?

我正在一个项目,我需要修改在500多个图像,以给悬空的悬停效果。我将需要修改每个图像给外部发光。这将是一个非常耗时的任务。

这是一个图像的示例。所有图片都是透明的.png

是否有可能给这个outerglow效果瓶图像使用CSS3的任何技巧?

这只是一个图像的示例,其他图像具有不同的大小和形状。

解决方法

这可以使用过滤器(Box-shadow)来完成。看看 http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

这里是一个演示http://jsfiddle.net/jaq316/EKNtM/

这里是代码

<style>
.shadowCSS { Box-shadow: 12px 12px 7px rgba(0,0.5); }
.shadowfilter { -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0.5));
filter: url(shadow.svg#drop-shadow); }
.bottleimage {width: 500px;}
</style>
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png" class="shadowfilter bottleimage"/>

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效