将模糊设置为Div

Question

我想在几个divs中添加模糊，因此我将其添加到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 library（http://blurjs.com/），
它是CrossBrowser，但您需要将JavaScript导入到您的页面。
（不是问题，因为模糊主要只是花哨的效果）。

这也是很好的演示（http://tympanus.net/tutorials/itemblur/）
用描述发生了什么（http://bit.ly/1aoe8um）..

可以帮助您。

Answer 2

正如您在下面的链接中看到的那样，CSS过滤器并没有得到很好的支持。这就是为什么它在每个浏览器中都无法正常工作的原因。

http://caniuse.com/css-filters

至于滞后，您应该发布一个示例，因为这与滞后无关。

Answer 3

模糊越大，浏览器渲染的内存密集度就越大（请参阅此处）。

要使在Firefox中使用任何过滤器，您需要在SVG（例如Blur）中定义它，并使用过滤器样式的url()变体链接到它。此方法也应适用于IE的版本大于9。

较旧的IE具有您自己的同等filter样式，您可以使用。如果所有其他方法都失败了，则可以使用ModernIzr来检测对filter样式的支持并进行适当的后备调整（需要添加css-filters和svg-filters的非核心检测）。