如何使用css实现毛玻璃的效果

2022-12-24 0 53

如何使用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;
}
复制代码

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

效果如下:

如何使用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实现毛玻璃的效果

接下来就是效果图:

如何使用css实现毛玻璃的效果

可以很明显得看到,这次我们模糊的知识盒子的背景,并有模糊掉盒子本身的内容,这就是backdrop-filter的优势所在。

总结

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

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

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论