如何使用CSS3透明png中的外部对象？
我正在开发一个项目，在这个项目中，我需要在超过500张图片上进行修改，以提高hover效果的余辉 。 我将需要修改每个图像给外面的辉光。 这将是一个非常耗时的任务。
这是一个图像的例子。 所有的图像是透明的.png
是否有可能使用CSS3的任何技巧来给这个瓶子图像的外部效果？
这只是一个图像的一个例子，其他图像的大小和形状是不同的。
这可以使用filter（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"/> 你可以做的是在你的graphics程序中创build一个发光效果，然后在图像hover时应用它作为背景图像。 你将不得不为自己的每个图像发光，但它看起来非常酷。
编辑：我做了一个程序，将快速，轻松地为您创build发光的图像。 你可以在http://thedarkworld.net/projects/imgglow/下载;
希望这可以帮助。
这里有一个插件，我发现很早，做的PNG图像技巧…
用法：
启用发光并设置颜色和半径：
$("#testimg").glow({ radius: "20", color:"green"});
禁用发光：
$("#testimg").glow({ radius: "20", color:"green", disable:true });
要么
$("#testimg").glow({ disable:true });
如果你必须这样做500+的图像，我会做的是一个透明的巴宝瓶的反面的瓶子周围的羽化边缘，并奠定了在底部的背景颜色和瓶图像之间的DIV 。 这将使纯色背景颜色显现为淡入到反转瓶PNG中，所有您必须做的改变发光颜色都是改变CSS的值。
写一些jQuery让你inputhex值，然后设置;）
编辑*
问题解决了！
http://phillipjroth.com/stackoverflow/8693733/index.html
编辑CSS代码“background-color”的第19行，它将更新辉光。 PNG的质量很差，但你可以微调他们摆脱崎岖的边缘。
像馅饼一样容易。 您只需使用相同的图像两次，一个在另一个之上。
<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，并在上面的图像hover时将其设置回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的要求。
其实你可以用CSS3filter来做到这一点。 只需将两个图像堆叠在一起，然后将以下样式应用于其中一个：
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
要改变其他图像的颜色，你可以使用其他filter，如色调旋转，sephia等
我喜欢用一些堆叠来产生这样的光芒。 第一张图片使用下面的CSSfilter规则：
blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1)
这给你一个比蓝色的基础“瓶”发光稍大。
然后在相同的坐标下加载图像的第二个副本，为透明的背景上的透明背景瓶提供类似的透明背景模糊的蓝色“光环”。
我发现一个简单的方法，如果你可以使用Photoshop的。
您可以在Photoshop中打开透明图像（example.png）并使用模糊工具。 然后模糊整个图像并保存为（example-hover.png）。
<div id="img1"> <img src="images/example.png"> </div> #img1:hover{ background: url('images/example-hover.png') no-repeat 0px 0px;; }
