前言
之前在逛一些网站的时候，就经常看见一些图片背景模糊的效果，这样的效果可以使得用户将更多的注意力放在清晰的地方上，可以不经意间引导用户。
我就很好奇，这样的一种效果是怎么实现的。恰好这几天周末，顺便弥补一下我拙劣的css知识。
通过查找一些资料，我发现这样的效果大致可以使用两种方法来实现：
- 传统的filter
- css3新特性：backdrop-filter
下面我就主要讲述这两种方法的实现。
传统的filter
首先就讲一下比较老一点的方法，filter（过滤）,听这名字，就知道里面可以实现功能不仅仅是实现毛玻璃这样的效果。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
复制代码
可以看到这个属性里面有很多的功能，其中就包括了模糊的功能，blur()，这个属性可以实现模糊的效果，但是这个属性是不支持IE的，所以如果你的项目需要兼容IE的话，那么这个方法就不适合你了。（但是还好IE已经停止更新了）
filter: blur(10px);
复制代码
那就用一个例子来说明一下这个功能吧。
<div class="test"></div>
复制代码
为了方便，我们只使用一个div盒子
css代码如下：
.test {
width: 400px;
height: 200px;
filter: blur(2px);
background: url(background.png) no-repeat;
}
复制代码这个图片地址是我本机的图片地址，所以你们可能看不到效果，但是你们可以自己找一张图片，然后把地址改成你们的图片地址就可以了。
效果如下：
为了对比更加明显，加一个没有模糊效果的图片：
但是使用这个方法的话，就会有一个问题，就是如果你的图片是一个动态的图片，那么这个模糊的效果就会跟着动态的图片一起动，这样的效果就不是我们想要的了。并且这个方法的模糊效果会影响到子元素，比如我在图片中间放一个盒子（子元素），那么盒子里面的内容也会被模糊掉。
就像这样
我在子盒子里面放了1-6的数字，但是数字被模糊掉了，这样的效果就不是我们想要的了。
所以就有了第二种方法实现：
css3新特性：backdrop-filter
这个属性是css3的新特性，所以兼容性不是很好，但是现在的浏览器都已经支持了，所以这个方法还是可以使用的。
backdrop-filter: none|filter|initial|inherit;
复制代码
可以看到这里有四个属性，其中filter就是我们需要的属性，
当然在filter属性里面也有很多的功能，我们只需要用到模糊的功能就可以了，blur()。
<div class="test">
<div class="child">123456</div>
</div>
复制代码
然后接下里，就是css代码：
.test {
width: 1200px;
height: 800px;
background: url(background.png) no-repeat;
}
.child {
width: 600px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -60px;
top: 50%;
margin-top: -100px;
background-color: rgba(255, 255, 255, .7);
backdrop-filter: blur(10px);
}
复制代码首先放一张没有模糊效果的图片：
接下来就是效果图：
可以很明显得看到，这次我们模糊的知识盒子的背景，并有模糊掉盒子本身的内容，这就是backdrop-filter的优势所在。
总结
这两种方法都可以实现模糊效果，但是第二种方法的兼容性不是很好，所以如果你的项目需要兼容性比较好的话，那么就使用第一种方法，如果你的项目不需要兼容性的话，那么就使用第二种方法。
还有就是第一种毛玻璃效果会影响后面子元素，导致后面子元素也会被模糊掉。所以如果你的项目中有子元素并且不愿意被模糊的话，那么就建议使用第二种方法。
完整附件点此下载