如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果

所谓的毛玻璃效果其实是半透明+模糊，可以用CSS filter实现。
时间不多，就抛个砖，题主可以自己找一下文档和更多案例。
filter - CSS

div {
-moz-filter: blur(5px);
-webkit-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
大体思路是，当出现弹出层的时候，对背景层增加blur filter，再给弹出层的一定透明度就可以了。
因为有同学坚持说 CSS filter 只能用于图片，所以录了一个小视频，证明它是可以用于可视的DOM元素的。
在 codepen 上找了一个栗子，是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果，也可以说明，这个属性真的不是只能作用于图片，也不需要“截屏”啊。

已知的有2种方式：

1. 图片，用ps制作一个毛玻璃的图片，作为遮罩层放在上面，可以实现毛玻璃的效果。

2. css3+滤镜：代码最直观：

   html:

//引入示例图片，当然也可以一个div或者是内容什么的

css:




.blur {

filter: blur(10px);//一般浏览器

-webkit-filter: blur(10px);  /* chrome, opera */

-ms-filter: blur(10px);//ie10+

-moz-filter: blur(10px);//火狐

filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=6,   MakeShadow=false);   /*  IE6~IE9  */

}