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>

为了方便，我们只使用一个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的优势所在。

总结

这两种方法都可以实现模糊效果，但是第二种方法的兼容性不是很好，所以如果你的项目需要兼容性比较好的话，那么就使用第一种方法，如果你的项目不需要兼容性的话，那么就使用第二种方法。

还有就是第一种毛玻璃效果会影响后面子元素，导致后面子元素也会被模糊掉。所以如果你的项目中有子元素并且不愿意被模糊的话，那么就建议使用第二种方法。

这篇好文章是转载于：学新通技术网