CSS如何实现毛玻璃效果

CSS 如何实现毛玻璃效果

写在前面

之前在逛一些网站的时候，就经常看见一些图片背景模糊的效果，这样的效果可以使得用户将更多的注意力放在清晰的地方上，可以不经意间引导用户。

我就很好奇，这样的一种效果是怎么实现的。恰好这几天周末，顺便弥补一下我拙劣的css知识。通过查找一些资料，我发现这样的效果大致可以使用两种方法来实现：

1.传统的filter
2.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> 
</