重新创建引导程序的空气玻璃

Question

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

这是一个部分示例 - 查看此站点上的Navbar：Navbar Aero Glass示例它只是一个带有瓷砖背景的Div，可能是50％的不透明度。

现在，要获得完整的Aero Glass效果，我们需要模糊此Div/Navbar背后的任何内容。因此，在此示例中，Navbar需要模糊基础DIV背景图像。这就是让我感到困惑的原因。

我能找到的最接近的东西是：

img {

-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_objects_into_a_a_canvas

然后模糊画布，然后用Div夹。问题是您需要刷新屏幕截图才能给出实时模糊效果的外观（这非常慢，并且将滞后您的大多数访问者）。

这可以帮助您：https：//github.com/keithwhor/canvasblurrect

编辑这里的答案https://stackoverflow.com/a/18969917/7090648（标记）做您想要的。