在DIV上设置模糊

Question

我想为几个DIV添加模糊，所以我将它添加到CSS：

.div{
    -webkit-filter: blur(20px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

问题在于，当我滚动窗口时，它会滚动延迟。这不是唯一的问题 - 如果我没有误会，这段代码不适用于所有浏览器。那么如何为DIV添加模糊效果呢？

Answer 1

纯CSS中没有跨浏览器解决方案。
即使在CSS3中也是如此。

您仍然可以使用 Blur.js 库（http://blurjs.com/），
它是crossbrowser，但你需要导入javascript到你的页面 （不是问题因为模糊主要是花哨的效果）。

这也是很好的演示（http://tympanus.net/Tutorials/ItemBlur/）
描述发生了什么（http://bit.ly/1aOE8uM）..

可以帮助你。

Answer 2

正如您在下面的链接中看到的那样，CSS过滤器不受支持。这就是为什么它不能在每个浏览器中运行。

http://caniuse.com/css-filters

关于滞后，你应该发一个例子，因为这不应该与滞后有关。

Answer 3

模糊越大，浏览器呈现的内存密集程度越高（see here）。

要让任何过滤器在Firefox中运行，您需要在SVG中定义它（例如for blur）并使用filter style's url() variant链接到它。此方法也适用于大于9的IE版本。

较旧的IE有自己的equivalent filter style可以使用。如果所有其他方法都失败，您可以使用Modernizr检测对filter样式的支持并进行相应的后备调整（需要为css-filters和{{1}添加非核心检测}）。