场景：使区域试图模糊，例如未登陆情况下需要模糊显示某一区域。
方法：使用css滤镜filter属性,
例如：filter:blur(5px),其中blur中的数值越大越模糊。
效果如下：
但是仔细看看会有几个问题：
①、超出图片也被模糊了，尤其是背景色和图片颜色反差很大更容易发现这个模糊化的边缘。
②、图片边缘内部，很窄的部分是接近透明的，会漏出背景的颜色。
问题①的解决方案：
1）、在图片外部加一层容器，容器的宽高与图片一致，设置容器样式为 overflow: hidden; 即可去除边缘模糊；
修改后：
2）、也可以直接在图片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一个矩形，需要注意剪裁的元素必须为绝对定位的元素，即需要同时设置 position: absolute
clip属性深入了解：https://segmentfault.com/a/1190000011727957
问题②的解决方案：
图片外部添加一层容器，宽高和图片一致，同时设置相同的图片作为容器的背景图，这样漏出来的就是容器里的背景图。
filter的另外两个属性
brightness()- 设置元素亮度，值越大越亮，为百分比参数；contrast()- 设置元素对比度，值越大对比越明显，为百分比参数； 注：实际上个人感觉这两个属性的效果差不多。
css3实现毛玻璃效果
原文地址：https://www.cnblogs.com/hp0844182/p/9657708.html