Javascript iOS磨砂玻璃效果使用CSS处理页面内容

我想在所有浏览器（跨浏览器）的网站导航区域实现磨砂玻璃效果

要求是使头层后面的任何内容与iOS蓝色相同

页面上的任何内容（包括图像、文本）在向下滚动到标题后面时也会变得模糊。我在谷歌上搜索了很多结果，通常的做法是加载两幅图像，一幅是原始图像，另一幅是模糊过滤器，但对页面上的文本不起作用

这是我到现在为止所做的

需要帮助，请帮忙

---

谢谢

这目前只在WebKit nightlies和Safari 9中可能实现，这是测试版

-webkit-backdrop-filter: blur(10px);

有关讨论，请参阅。从职位：

标准化 WebKit去年向CSS工作组提出了这个特性，目前它已经在CSS过滤器2级规范的编辑草稿中

您可以使用

后台附件：fixed

实现相同的效果：

body {
    background-image: url(image.jpg) no-repeat 50% 50%;
    background-attachment: fixed;
}

nav {
    background-image: url(image-blurred.jpg) no-repeat 50% 50%;
    background-attachment: fixed;
}

background attachment:fixed

的工作方式是，背景图像应用于整个视图端口，而元素就像一个遮罩，只显示元素内容框后面的背景图像部分