Html div 元素上的模糊效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11977103/
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
Blur effect on a div element
提问by bialasikk
Is it possible to add a gaussian blur on divelement? If yes, how I can do this?
是否可以在div元素上添加高斯模糊？如果是，我该怎么做？
回答by BenSlight
I think this is what you are looking for? If you are looking to add a blur effect to a div element, you can do this directly through CSS Filters-- See fiddle: http://jsfiddle.net/ayhj9vb0/
我想这就是你要找的？如果您想为 div 元素添加模糊效果，您可以直接通过 CSS 过滤器执行此操作——请参阅小提琴：http: //jsfiddle.net/ayhj9vb0/
div {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100px;
height: 100px;
background-color: #ccc;
}
回答by Phillip Schmidt
Try using this library: https://github.com/jakiestfu/Blur.js-II
尝试使用这个库：https: //github.com/jakiestfu/Blur.js-II
That should do it for ya.
那应该为你做。
回答by Noah Wetjen
This is what I found:
这是我发现的：
Demo: http://tympanus.net/Tutorials/ItemBlur/
演示：http: //tympanus.net/Tutorials/ItemBlur/
and Tutorial: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
和教程：http: //tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
回答by Rijo
I got blur working with SVG blur filter:
我使用 SVG 模糊过滤器进行了模糊处理：
CSS
CSS
-webkit-filter: url(#svg-blur);
filter: url(#svg-blur);
SVG
SVG
<svg id="svg-filter">
<filter id="svg-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</svg>
Working example:
工作示例：
https://jsfiddle.net/1k5x6dgm/
https://jsfiddle.net/1k5x6dgm/
Please note - this will not work in IE versions
请注意 - 这在 IE 版本中不起作用
