如何通过 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)

}

大体思路是，当出现d出层的时候，对背景层增加blur filter，再给d出层的一定透明度就可以了。

因为有同学坚持说 CSS filter 只能用于图片，所以录了一个小视频，证明它是可以用于可视的DOM元素的。

在 codepen 上找了一个栗子，是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果，也可以说明，这个属性真的不是只能作用于图片，也不需要“截屏”啊。

使用filter下面的blur即可，filter需要添加前缀。比如

.div{

-webkit-filter:blur(10px)

-moz-filter:blur(10px)

}

---