CSS 如何使用 CSS3 为透明 png 中的对象提供外部发光？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8693733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to give outer glow to an object in a transparent png using CSS3?
提问by Jitendra Vyas
I'm working on a project where I need to make modifications in more then 500 images to give outerglow on hovereffect. I will need to modify each image to give the outer glow. It will be a very time consuming task.
我正在做一个项目，我需要对 500 多张图像进行修改，以在悬停效果上提供外发光效果。我需要修改每个图像以提供外部发光。这将是一项非常耗时的任务。
This is example of one image.All images are transparent .png
这是一张图片的例子。所有图像都是透明的 .png
Is it possible to give this outerglow effect to the bottle image using any tricks of CSS3?
是否可以使用 CSS3 的任何技巧为瓶子图像提供这种外发光效果？
This is just an example of one image other images are in different size and shape.
这只是一个图像的示例，其他图像具有不同的大小和形状。
回答by Jacques Snyman
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
这可以使用 filter(box-shadow) 来完成。看看http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
Here is a demo http://jsfiddle.net/jaq316/EKNtM/
这是一个演示http://jsfiddle.net/jaq316/EKNtM/
And here is the code
这是代码
<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"/>
回答by unijad
here's a plugin i found early that do the trick on PNG Image...
这是我很早就发现的一个插件，它可以在 PNG 图像上发挥作用...
Usage:
用法：
Enable glow and set color and radius:
启用发光并设置颜色和半径：
$("#testimg").glow({ radius: "20", color:"green"});
Disable glow:
禁用发光：
$("#testimg").glow({ radius: "20", color:"green", disable:true });
or
或者
$("#testimg").glow({ disable:true });
回答by Simentesempre
As easy as pie. You just use the same image twice, one above the other.
像馅饼一样简单。您只需使用相同的图像两次，一个在另一个之上。
<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>
You just work on the image below, scale it a little, bright it until it's white and then blur it. Then you set your opacity on 0 and set it back to one when the above image is hovered.
您只需处理下面的图像，将其缩放一点，使其变亮直至变白，然后将其模糊。然后将不透明度设置为 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;
}
No Javascript required whatsoever.
不需要任何 Javascript。
回答by wwwroth
If you have to do this to 500+ images, what I would do is great a transparent PNG of the inverse of the bottle with feathered edges around the bottle and lay that over a DIV with the background color under it and the bottle image in between. This will make the solid background color appear to fade out into the inverse bottle PNG and all you would have to do to change the glow color is change the value of the CSS.
如果您必须对 500 多张图像执行此操作，我会做的是一个透明 PNG 的瓶子倒置，瓶子周围带有羽毛边缘，然后将其放在一个 DIV 上，背景颜色在其下方，瓶子图像介于两者之间. 这将使纯色背景看起来淡出到反向瓶 PNG 中，您只需更改 CSS 的值即可更改发光颜色。
Write some jQuery to let you enter the HEX value and you're set ;)
编写一些 jQuery 来让您输入十六进制值并进行设置；)
EDIT *
编辑*
Problem solved!
问题解决了！
http://phillipjroth.com/stackoverflow/8693733/index.html
http://phillipjroth.com/stackoverflow/8693733/index.html
Edit line 19 of the CSS code "background-color" and it will update the glow. The PNG's are low quality but you can fine tune them to get rid of the ridged edges.
编辑 CSS 代码“background-color”的第 19 行，它将更新发光。PNG 的质量较低，但您可以对其进行微调以去除脊状边缘。
回答by Aaron Nichols
I prefer to generate such glows with a bit of stacking. The first image uses the following CSS filter rule:
我更喜欢通过一些堆叠来产生这种发光。第一张图片使用以下 CSS 过滤规则：
blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1)
This gives you a somewhat larger than the base 'bottle' glow in blue.
这使您比蓝色的底座“瓶子”发光略大。
Then load a second copy of the image at the same coordinates, giving you the bottle with a transparent background atop the blurred blue 'halo' with a similar transparent background.
然后在相同的坐标处加载图像的第二个副本，在具有类似透明背景的模糊蓝色“光环”上为您提供具有透明背景的瓶子。
回答by Reynold Salceda
Actually you can do this with the blur CSS3 filter. Just stack 2 images on top of each other and apply the following style to one of it:
实际上，您可以使用模糊 CSS3 过滤器来做到这一点。只需将 2 个图像堆叠在一起，并将以下样式应用于其中一个：
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
To change color of the other image, you can play with other filters like the hue-rotate, sephia etc.
要更改其他图像的颜色，您可以使用其他滤镜，如色调旋转、棕褐色等。
回答by Bombaclat
I found an easy way if you can work with photoshop.
如果您可以使用 photoshop，我找到了一个简单的方法。
You open the transparent image (example.png) in photoshop and take the blur tool. Then blur the whole image and save as (example-hover.png).
您在 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;;
}
