目前在 Web 上实现毛玻璃效果一般是通过一个大截屏图片的高斯模糊加上滚动位置的切换来实现，而在 iOS9 和 OS X 10.11 的 Safari 原生支持了 CSS 的 backdrop-filter 来实时地生成一个毛玻璃效果的背景。
代码：
{
-webkit-backdrop-filter: blur(10px);
}
目前还需要 webkit 的前缀。
除了 blur, backdrop-filter 还有以下这些属性
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
用法跟 filter 相似：
{
-webkit-backdrop-filter: blur(10px) brightness(1.2) contrast(0.3);
}
不仅是普通的图片，实时播放的视频也能实现毛玻璃：
最后放一个 demo：(iOS9、OS 10.11 Safari 可以体验)
参考资料：
