页面内容使用CSS的iOS磨砂玻璃效果[重复]

【问题标题】：iOS frosted glass effect using CSS for on page content [duplicate]页面内容使用CSS的iOS磨砂玻璃效果[重复]
【发布时间】：2015-08-24 12:15:55
【问题描述】：

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

要求是将header层后面的任何东西都设置为iOS蓝色，与http://goo.gl/X5FEiH相同

页面上的任何内容（包括图像、文本）在此标题后面向下滚动时也会变得模糊。我用谷歌搜索了很多结果，通常的做法是加载两张图片，一张是原图，一张是第二张模糊滤镜，但它不适用于页面文本。

这是我到目前为止所做的http://goo.gl/m2s1dA

需要帮助，请帮助。

谢谢

【问题讨论】：

标签： javascript html ios css

【解决方案1】：

这目前仅在 WebKit nightlies 和 Safari 9（处于测试阶段）中可用。

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

请参阅introductory blog post on webkit.org 进行讨论。来自帖子：

标准化

WebKit 去年向 CSS 工作组提出了这个功能，目前处于 CSS Filters Level 2 规范的编辑草案中。

你或许可以使用background-attachment: 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 的工作方式是将背景图像应用于整个视口，而元素的作用类似于遮罩，仅显示元素内容框后面的背景图像部分。

【讨论】：