javascript - 高斯模糊 onHover 使用 jQuery

Question

我想知道是否有某种方法可以使用 jQuery（或 jQuery 可以修改的 CSS）将高斯模糊应用于 div。我已经研究过 blur()，但至少在 Safari 中，它似乎并没有完成我正在寻找的东西。如果可能的话，我想在效果上使用淡入淡出，所以它会逐渐模糊。

谢谢你的帮助！

Answer 1

请注意，Blur当文本框（输入等）等 DOM 元素失去焦点时，不应与您正在谈论的那种模糊（高斯/运动模糊）混合。

这个问题没有好的跨浏览器解决方案。但是，您可以使用 Ben 建议的 API 来模糊图像。或者通过使用这个。

也许如果您找到一种将 div 内容绘制到 HTML5 画布上的方法，那么您可以使用Pixastic应用模糊过滤器？

Answer 2

查看 jQuery 的 blur.js 插件：http://blurjs.com ，它使用我的 Stack Blur 算法，我认为这是目前最快的基于 JavaScript 的模糊画布元素的方法：http ://www.quasimondo.com/StackBlurForCanvas /StackBlurDemo.html

Answer 3

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');

blur.svg 的内容

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

更多：http ://demosthenes.info/blog/534/Crossbrowser-Image-Blur

Answer 4

这里没有提到我们可以使用 CSS3 为文本创建出色的逼真模糊效果text-shadow。而且，（是的，当然！）我们可以使用box-shadow （您知道，允许插入阴影和多个阴影）模糊纯色背景和边框。

所以我希望在大多数情况下，您可以结合以下方式实现逼真的模糊效果：

1）使用画布进行图像模糊

2）文本模糊使用 text-shadow

3）纯背景和边框模糊使用 box-shadow

4）我忘了别的吗？...

---

PS：我相信编写一个模糊任何html的魔术类是不可能的。

无法克服的限制：图像边界模糊、嵌入媒体模糊