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

Question

我正在开展一个项目,我需要在500多个图像中进行修改,以便在悬停效果上进行外部渲染.我需要修改每个图像以给出外部发光.这将是一项非常耗时的任务.

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

是否可以使用CSS3的任何技巧将这种外部效果效果赋予瓶子图像？

这仅是一个图像的示例,其他图像具有不同的尺寸和形状.

Answer 1

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

这是一个演示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"/>

Answer 2

这是我早期发现的一个插件,可以在PNG图像上进行操作......

用法:

启用发光并设置颜色和半径:

$("#testimg").glow({ radius: "20", color:"green"});

禁用发光:

$("#testimg").glow({ radius: "20", color:"green", disable:true }); 

要么

$("#testimg").glow({ disable:true }); 

https://github.com/MisterDr/JQuery-Glow

Answer 3

像馅饼一样容易。您只需使用同一张图片两次，一张就在另一张上面。

<div class="container">
  <img class="main" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" />
  <img class="glow" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" /> 
</div>

您只需对下面的图像进行处理，将其缩放一点，使其变亮直到其变为白色，然后对其进行模糊处理。然后，将不透明度设置为0，然后将鼠标悬停在上面的图像上，将不透明度重新设置为1。

.container {
  position:relative;
  background-color:#444444;
  width:600px;
  height:600px;
}
img {
  position:absolute;
  max-height:90%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
img.main {
  z-index:2;
}
img.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  filter: brightness(0) invert(1) blur(5px);
  -webkit-filter: brightness(0) invert(1) blur(5px);
  opacity:0;
}
img.main:hover ~ img.glow {
  opacity:1;
}

不需要任何Javascript。

https://jsfiddle.net/nkq1uxfb/3/

Answer 4

如果你必须对 500 多个图像执行此操作，我会做的是一个瓶子反面的透明 PNG，瓶子周围有羽毛边缘，然后将其放在 DIV 上，背景颜色在其下方，瓶子图像位于中间。这将使纯色背景颜色看起来淡出到反向瓶子 PNG 中，而要更改发光颜色，您所需要做的就是更改 CSS 的值。

编写一些 jQuery 让您输入十六进制值，然后就完成了；）

编辑*

问题解决了！

http://phillipjroth.com/stackoverflow/8693733/index.html

编辑 CSS 代码“background-color”的第 19 行，它将更新发光效果。PNG 的质量较低，但您可以对其进行微调以消除脊状边缘。