高斯模糊onHover使用jQuery

问题描述

我想知道是否有一些方法使用jQuery（或jQuery可以修改的CSS）应用高斯模糊到div。我已经调查了blur（），但至少与Safari，它似乎并没有完成我所寻找的。如果可能，我想对效果使用fadeIn，因此它会逐渐模糊。

感谢任何帮助！

Blur 是当一个DOM元素（如文本框（输入等））失去焦点，而不应该（高斯/运动模糊）混合。

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

也许如果你找到一种方法来绘制你的div内容到一个HTML5画布，你可以然后应用模糊过滤器使用？

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.

Thanks for any help!

解决方案

Be aware that Blur is 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).

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.

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?

这篇关于高斯模糊onHover使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！