css:使用filter和backdrop-filter实现高斯模糊效果
创始人
2024-05-30 16:16:47
0

背景

今天接到一个需求是,使用高斯模糊的效果对一个页面进行模糊处理,正好借这个机会来整理一下 css3 中高斯模糊的两个 API

API介绍

filter

说明:
该 API 是一个过滤器,不仅能实现高斯模糊,还有很多比如颜色偏移、饱和度、灰度等等

语法:

// 使用空格分隔多个滤镜
filter: none;
// 高斯模糊
filter: blur(4px);
// 线性亮度
filter: brightness();
// 对比度
filter: contrast();
// 阴影效果
filter: drop-shadow();
// 灰度
filter: grayscale();
// 色相旋转
filter: hue-rotate();
// 反转图像
filter: invert();
// 转换透明度
filter: opacity();
// 饱和度
filter: saturate();
// 褐色
filter: sepia();
// SVG滤镜
filter: url();

其中高斯模糊 filter: blur();

backdrop-filter

说明:
当你创造一个元素加上这个属性后,会使得这个元素后面的区域添加效果(如模糊或颜色偏移)

对比:
filter 属性必须要加载图像上或者背景图上,而 backdrop-filter 只要是一个元素就可以。

语法:

backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

示例

filter例一


全部模糊

在这里插入图片描述
这里要注意的一点是,添加模糊后,实际的大小会超出我们设置的宽高,因为周围的毛边效果,你可以在外面包一层并设置 overflow: hidden;

filter例二


全部模糊

在这里插入图片描述
这种方式的话,文字和图片由于是平级的,所以文字要么在图片下方,要么在上方(根据z-index来控制),而不会对文字进行模糊。

backdrop-filter例一


部分模糊

在这里插入图片描述
可以看到,backdrop-filter 属性不必设置在一个图片元素上面,而是任何元素上面就行,这种方式我觉得更加灵活

总结

  • 如果只是模糊一张图片,那么直接用 filter 就可以实现。
  • 如果想要用一个模糊蒙层盖住html页面/图片的某一部分,那么使用 backdrop-filter。

当然,使用 backdrop-filter 也可以满足第一种场景。

相关内容

热门资讯

安卓系统怎么彻底卸载,从数据清... 手机里的安卓系统自带软件太多,是不是感觉手机越来越卡,内存不够用呢?别急,今天就来教你怎么彻底卸载这...
安卓系统为啥不好直播,技术瓶颈... 你有没有发现,现在直播这么火,但为什么很多人都说安卓系统直播起来有点儿“不给力”呢?今天,咱们就来聊...
华为安卓手机鸿蒙系统,开启全场... 你知道吗?最近华为手机界可是掀起了一股不小的风浪呢!没错,就是那个我们熟悉的华为,他们竟然要全面换装...
安卓系统怎么控制特斯拉,便捷体... 你有没有想过,你的安卓手机竟然能和特斯拉汽车玩起“互动游戏”呢?没错,就是那个让无数车迷为之疯狂的特...
安卓系统抖音推广,提升品牌影响... 你知道吗?最近安卓系统上的抖音可是火得一塌糊涂!不仅功能强大,而且各种新玩法层出不穷,简直让人爱不释...
怎让安卓系统变苹果系统,揭秘跨... 你是不是也和我一样,对安卓系统有点审美疲劳,想要换换口味,体验一下苹果系统的魅力呢?别急,今天就来给...
平板安卓系统哪里下载,探索下载... 亲爱的平板电脑迷们,你是否在为寻找心仪的安卓系统而烦恼呢?别急,今天我就要给你揭秘平板安卓系统的下载...
安卓系统开机锁设置,轻松掌握密... 亲爱的手机控们,是不是觉得手机里的秘密太多,怕别人一按开机键就一览无遗?别担心,今天就来教你们如何给...
安卓系统下数据恢复,策略、工具... 手机里的照片、视频、联系人,说没就没了?别急,今天就来给你支个招,让你在安卓系统下轻松恢复丢失的数据...
安卓系统怎么拼接图片,轻松制作... 你有没有想过,用安卓手机拍的照片,怎么才能把它们变成一幅美美的拼图呢?别急,今天就来手把手教你安卓系...
安卓系统重启还是开关,轻松解决... 手机卡住了,是不是又得重启或者关机再开机了?别急,今天就来给你好好说说这安卓系统重启还是开关的学问,...
vertu是安卓系统吗,安卓系... 亲爱的读者们,今天我要和你聊聊一个话题——Vertu手机,是不是安卓系统?相信很多人对这款手机都充满...
安卓系统代替品,开启全新智能体... 你有没有想过,手机里的那个安卓系统,是不是有一天会突然有个超级无敌的替代品跳出来,让你眼前一亮呢?没...
安卓sdk系统是什么,构建移动... 你有没有想过,为什么你的手机可以那么聪明,随时随地帮你导航、拍照、聊天?这背后,可是有一个强大的“大...
安卓苹果不兼容系统,揭秘安卓与... 哎呀呀,你知道吗?在这个科技飞速发展的时代,手机可是我们生活中不可或缺的好伙伴。但是,你知道吗?安卓...
安卓5.0以上的系统,探索安卓... 你有没有发现,自从手机升级到了安卓5.0以上的系统,整个操作体验都变得不一样了呢?就像是给手机穿上了...
鸿蒙硬刚安卓系统,构建全场景智... 亲爱的读者们,今天咱们来聊聊一个超级热门的话题——鸿蒙系统硬刚安卓系统!没错,就是那个华为家的鸿蒙系...
安卓系统电脑下载ai,安卓电脑... 你有没有想过,你的电脑也能装上安卓系统,就像你的手机一样?没错,就是那个你每天刷抖音、看视频、玩游戏...
安卓系统6.0升8.0,从6.... 亲爱的手机控们,你们是不是也和我一样,对手机系统升级充满了好奇和期待呢?今天,我就要来和你聊聊安卓系...
安卓车机外接系统,提升驾驶体验... 你有没有想过,你的安卓车机其实是个隐藏的“潜力股”呢?别看它平时默默无闻,只要给它来点“外接系统”的...