css - 如何使用 CSS3 为透明 png 中的对象提供外发光？

Question

我正在开展一个元素，我需要对 500 多张图片进行修改，以悬停时产生外光 效果。我将需要修改每张图片以提供外发光。这将是一项非常耗时的任务。

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

是否可以使用任何 CSS3 技巧为瓶子图像赋予这种外发光效果？

这只是一张图片的示例，其他图片的大小和形状各不相同。

Answer 1

这可以使用滤镜(投影)来完成。

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

这是代码

    <style>
        .shadowfilter {
        -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
         filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    }

    .bottleimage {
        width: 500px;
    }
    </style>
    <img 
        src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png" 
        class="shadowfilter bottleimage"/>