如何使用CSS3在透明png中给外部发光的对象？ [英] How to give outer glow to an object in a transparent png using CSS3?

问题描述

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

I'm working on a project where I need to make modifications in more then 500 images to give outerglow on hover effect. I will need to modify each image to give the outer glow. It will be a very time consuming task.

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

This is example of one image. All images are transparent .png

是否可以使用CSS3的任何技巧为瓶子图片赋予这种outerglow效果？

这只是一个图片的示例其他图片的大小和形状不同。

This is just an example of one image other images are in different size and shape.

推荐答案

可以使用过滤器（box-shadow）。请查看 http://demosthenes.info/blog/598/ boxshadow-property-vs-dropshadow-filter-a-complete-comparison

This can be done using filter(box-shadow). Have a look at 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,0,0.5); }
.shadowfilter { -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,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在透明png中给外部发光的对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！