css实现高斯模糊(毛玻璃效果)

分享设计师与开发者间的发现,如何通过backdrop-filter属性实现元素背后的高斯模糊效果,区别于filter的局限性,提升视觉体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景

昨天设计走查我们做的成果时,有一个弹窗的毛玻璃效果还原度不高,要求有元素拖到毛玻璃后面的时候,这些元素也是模糊的。
我最开始在蓝湖右侧复制的代码,用了background渐变,最重要的是使用了filter: blur(15px);但是发现最终的效果并没有使毛玻璃后面的元素变得也模糊,只是背景变高斯模糊了。
当时我在想,我就是按照设计给的色值做的呀,高斯模糊不就是filter吗,也是15px呀。并没有觉得是自己用的不对的问题。
想要实现的效果如下图
在这里插入图片描述

解决

本来这个效果是我暂时代替同事写的,然后同事有时间改设计提的他做的这部分需要修改的地方时,我今天一拉代码,发现我厉害的同事改好了这个效果,于是我就好奇看了下如何做到的。
哇,最终发现他将filter: blur(15px)改为了backdrop-filter: blur(15px)就好了。这么简单,于是就去再仔细了解了下filter和backdrop-filter。

小结

filter

只能让它作用的背景变模糊,当有元素拖动到它下面时,不会模糊下面的元素。仅仅是当前背景变模糊。

backdrop-filer

搜索了之后人家说:这个属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

在这里在说一句,还是我同事厉害呀!我太死板了!要向其他人学习!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值