如何通过 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 效果，也可以说明，这个属性真的不是只能作用于图片，也不需要“截屏”啊。

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。

首先，引入上方这个polyfill

然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法

var getPixelRatio = function(context) {

  var backingStore = context.backingStorePixelRatio ||

    context.webkitBackingStorePixelRatio ||

    context.mozBackingStorePixelRatio ||

    context.msBackingStorePixelRatio ||

    context.oBackingStorePixelRatio ||

    context.backingStorePixelRatio || 1

   return (window.devicePixelRatio || 1) / backingStore

}

//调用

var ratio = getPixelRatio(ctx)

之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：

ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio)

二种方法：CSS3的filter，加一层Canvas实现高斯模糊。

用filter的话，下面很多层总有个父级吧? 在这个父级上加 filter:blur(5px) 不就完了？粗暴点，body下一个半透明遮罩层，再一个wrapper包住所有内容。

用canvas实现高斯模糊，这个本质上就是将背景投影到canvas上，然后再高斯模糊，这个可以找相应插件。合金队也有，不过可能太大了。

---