Question

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

感谢您的帮助！

Answer 1

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

此问题没有良好的跨浏览器解决方案。但是，您可以使用Ben建议的API来模糊图像。或者using this one。

也许如果您找到了将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为文本创建excellent逼真模糊效果。而且，（是的，当然！）我们可以使用box-shadow模糊纯色背景和边框（允许使用插入阴影和多个阴影）。

所以我希望在大多数情况下你可以实现真实的模糊效果：

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

2）使用 text-shadow

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

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

PS：我认为写一个模糊任何HTML的魔术课是不可能的。

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

高斯模糊onHover使用jQuery

4 个答案: