Javascript 高斯模糊 onHover 使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1966949/
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
Gaussian Blur onHover Using jQuery
提问by PF1
I am wondering if there is some way to apply a gaussian blur onto a div using jQuery (or CSS that jQuery can modify). I have looked into blur(), but at least with Safari, it doesn't seem that it accomplishes what I'm looking for. If possible, I want to use fadeIn on the effect, so it blurs gradually.
我想知道是否有某种方法可以使用 jQuery（或 jQuery 可以修改的 CSS）将高斯模糊应用到 div 上。我已经研究了 blur()，但至少对于 Safari，它似乎并没有完成我正在寻找的东西。如果可能的话，我想在效果上使用淡入淡出，所以它会逐渐模糊。
Thanks for any help!
谢谢你的帮助！
回答by Mickel
Be aware that Bluris when a DOM-element, such as textboxes (inputs etc.) loses focus, and should not be mixed with the kind of blur you are talking about (gaussian/motion blur).
请注意，Blur当 DOM 元素，例如文本框（输入等）失去焦点时，不应与您正在谈论的那种模糊（高斯/运动模糊）混合。
There is no good cross-browser solution for this problem. You can, however, blur images by using a API such as the one Ben suggests. Or by using this one.
这个问题没有很好的跨浏览器解决方案。但是，您可以使用 Ben 建议的 API 来模糊图像。或者通过使用这个。
Maybe if you find out a way to draw your div contents to a HTML5 canvas you can then apply the Blur-filter by using Pixastic?
也许如果您找到一种将 div 内容绘制到 HTML5 画布的方法，您可以使用Pixastic应用模糊过滤器？
回答by Quasimondo
Check out the blur.js plugin for jQuery: http://blurjs.com, it uses my Stack Blur algorithm which I believe is currently the fastest JavaScript based way to blur canvas elements: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
查看 jQuery 的 blur.js 插件：http://blurjs.com ，它使用我的 Stack Blur 算法，我认为这是目前基于 JavaScript 的最快的模糊画布元素的方法：http: //www.quasimondo.com/StackBlurForCanvas /StackBlurDemo.html
回答by Armel Larcier
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
content of blur.svg
blur.svg 的内容
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>
More : http://demosthenes.info/blog/534/Crossbrowser-Image-Blur
更多：http: //demosthenes.info/blog/534/Crossbrowser-Image-Blur
回答by Dan
It has not been mentioned here that we can create an excellentrealistic blur effect for text using CSS3 text-shadow. And, (yep, of course!) we can blur solid backgrounds and borders using box-shadow(inset shadows and multiple shadows are allowed, you know).
这里没有提到我们可以使用 CSS3 为文本创建出色的逼真模糊效果text-shadow。而且，（是的，当然！）我们可以使用box-shadow（允许插入阴影和多个阴影，你知道）模糊纯背景和边界。
So I hope in most cases you can achieve a realistic blur effect combining:
所以我希望在大多数情况下，您可以结合以下各项来实现逼真的模糊效果：
1) image blur using canvas
1）使用画布进行图像模糊
2) text blur usingtext-shadow
2）文字模糊使用text-shadow
3) solid background and borders blur usingbox-shadow
3) 使用纯色背景和边框模糊box-shadow
4) have I forgotten anything else?....
4）我还忘记了什么吗？....
PS: I believe it's not possible to write a magic class that blurs any html.
PS：我相信编写一个模糊任何 html 的魔术类是不可能的。
The restrictions that can't be overcome: blur the border of the image, blur embedded media
无法克服的限制：模糊图像的边界，模糊嵌入的媒体
