CSS 如何实现毛玻璃效果

写在前面

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

我就很好奇，这样的一种效果是怎么实现的。恰好这几天周末，顺便弥补一下我拙劣的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;
}
复制代码

这个图片地址是我本机的图片地址，所以你们可能看不到效果，但是你们可以自己找一张图片，然后把地址改成你们的图片地址就可以了。

效果如下：

CSS如何实现毛玻璃效果

为了对比更加明显，加一个没有模糊效果的图片：

CSS如何实现毛玻璃效果

但是使用这个方法的话，就会有一个问题，就是如果你的图片是一个动态的图片，那么这个模糊的效果就会跟着动态的图片一起动，这样的效果就不是我们想要的了。并且这个方法的模糊效果会影响到子元素，比如我在图片中间放一个盒子（子元素），那么盒子里面的内容也会被模糊掉。

就像这样

CSS如何实现毛玻璃效果

我在子盒子里面放了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);
        }
复制代码

首先放一张没有模糊效果的图片： CSS如何实现毛玻璃效果