为 Bootstrap 重新创建航空玻璃

Question

所以，这个概念很简单，但是代码很复杂……

这是一个部分示例 - 查看此站点上的导航栏： navbar aero glass example 它只是一个平铺背景的 DIV，不透明度可能为 50%。

现在，要获得完整的航空玻璃效果，我们需要模糊此 DIV / 导航栏后面的任何内容。因此，在此示例中，导航栏需要模糊底层 DIV 背景图像。这让我很困惑。

我能找到的最接近模糊滤镜的是：

图片{

-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);

}

但上述内容仅适用于 Firefox 的图像元素，不适用于 IE。

基本上，我需要一种方法来创建 DIV，并模糊该 DIV 元素后面的任何内容，并使其适用于所有浏览器。

提前致谢。

Answer 1

您可以将页面截屏到画布中。
示例：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

然后模糊画布并用 div 对其进行剪辑。 问题是您需要刷新屏幕截图才能获得实时模糊效果的外观（这非常慢并且会滞后大多数访问者）。

这可以帮助你：https://github.com/keithwhor/canvasBlurRect

编辑 https://stackoverflow.com/a/18969917/7090648（已标记）此处的答案可以满足您的需求。