大家都知道毛玻璃效果做的好的话，能使页面显得非常生动立体，整体效果非常好。果断火速入坑，总结出来一共有两种方法，下面一一介绍，把我的一些经验和大家分享分享。

第一种：通过CSS实现

现代先进的浏览器，普遍都支持这种方法，这也是两个方法里实现过程中最简单的，只是用到了 css 滤镜 （filter） 中的 blur 属性。但是，你要利用CSS做一个好的毛玻璃效果，需要注意很多细节。
具体怎么做呢？你只需要给图片加上 filter: blur(5px) ，其中，5px代表图像的模糊度，数值越大，模糊的越厉害 。经过赵AJ多次测试，当blur的值在3px~10px时，和刚手冲完的视觉效果类似 。
言归正传，你会发现css实现这种效果后，四周会有白边，具体如何修复，这里只给出一个建议。首先，你要知道铺满全屏的背景和页面上的小图片的处理方法的不同的，对于页面上的小图片我们只需要给它的包含元素添加一个 overflow: hidden 就可以。
处理小图片的方式非常简单，但是这个方法在页面背景上却不生效，至于为什么我也不太清楚，不过我尝试了多次，只使用 overflow: hidden 并不能让页面的背景边缘变清晰。这时候就要使用 transform: scale() 扩大，但是使用这个属性需要注意的是，扩大的比例。如果你的图片不需要考虑细节，那么你可以把比例调大一点。如果图片细节比较重要，那么就要选择适当的比例，还要考虑在不同大小的屏幕上的效果。

利用css实现就说这么多，此外你要注意一点： 由于兼容性问题，css滤镜效果有可能会失效，尤其在移动设备上，会耗费较大资源，导致页面卡顿。

第二种：利用js实现

前人栽树后人乘凉。利用前人已经实现的JS类库 StackBlur.js 。这样高斯模糊效果不但非常理想，而且可以局部模糊图片。
具体使用方法可以参考官方的Github，这里不再详细赘述。
👦 点击查看