页面模糊（毛玻璃）效果

页面中有些内容需要隐藏或者是有访问权限，那么在展示的时候可以给它一个遮罩层盖住，但是纯色的遮罩层效果并不太好，刚开始想着用模糊背景图片平铺，但是由于浏览器渲染和层级的关系，文字
内容在上层可以很清晰的显示出来，其实这个效果可以通过CSS的filter:blur()实现。

给页面的主div加上样式：

.mainContaner {
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(8px); /* Chrome, Opera */
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=8, MakeShadow=false); /* IE6~IE9 */
}

更多用法详见MDN官方文档。