关于前端:CSS实现毛玻璃效果的一种新方式

46次阅读

共计 1852 个字符，预计需要花费 5 分钟才能阅读完成。

在逛 V 站时看到一个自推 UI 组件库的帖子，我感觉很不错，在查看组件样例的时候呢，发现了他的抽屉组件的遮罩能够把整个页面增加毛玻璃成果！我就很诧异。马上就 F12查看了一下他的实现形式，因为在我映像里还没有一个很简略的的能够间接实现背景元素毛玻璃成果的形式。

其实不光是抽屉组件，其它的一些类 Modal 带有遮罩的组件都有这个毛玻璃的成果，大伙能够点点看看。
好了，不多废话间接开始正题。

CodePen Demo

CodePen 上的原 Demo 写的比拟芜杂，有很多无关的款式内容，我简化解决了一下。

早年最后的毛玻璃成果就是下面的 Demo 这样的，先在内部容器上增加背景图，并且在以后 “ 窗口 ” 上设置一样的背景图，再利用 filter: blur() 属性含糊遮罩层的背景。

然而这个会有一个问题，就是须要把滤镜属性 filter: blur() 设置在一个独自的背景元素或者伪类上，不然会把窗口外部的内容也给含糊了。并且会受限制这个咱们在前面说。

而是应用新滤镜属性 backdrop-filter: blur() 后的呢，就非常的简略了，能够看下方 演示 Demo：
CodePen Demo2

能够看到，比最后的毛玻璃实现形式少了一个伪类元素，并且他会间接把遮住的局部增加滤镜成果，不须要思考被遮住的内容了，也不会影响外部元素。也就是说 能够“不受限制”的实现毛玻璃成果。例如在文章最开始提到的，给整个页面元素都加上遮罩。

这在以前只能通过 canvas 成以后页面快照的形式生来实现，能够很显著的感觉到早些时候投入和回报的不成比例，然而当初应用 filter: blur() 能够很轻松的就实现了，投入产出比极高！

从张鑫旭大佬的《CSS 新世界》中理解到：

毛玻璃成果在前端圈造成探讨是在 iOS 7 面世的时候，和高斯含糊不同，毛玻璃的成果不是让以后元素含糊，而是让以后元素所在区域前面的内容含糊 …
… iOS 7 面世两年后，iOS 9 反对了一个名为 backdrop-filter 的 CSS 属性，它能够十分不便的实现毛玻璃成果 …..

能够看到因为苹果提出的个性，所以在 Safari 上的实现会很早（iOS 9 也就是说 2015 年就曾经反对了 😱），之后其余浏览器对于该属性的反对都是在 2019 年左右。

对于应用方面，尽管还是处于草案阶段，然而各个古代浏览器曾经不同水平的反对了这个属性（2022 年 07 月 26 日）：

Chrome ₇₆₊、Edge ₁₇₊ 和 Opera ₆₃₊ 曾经完满反对(Full support)，
Safari ₉₊ 和 iOS Safari ₉₊ 须要应用 -webkit- 前缀；
Firefox ₇₀₊ 比拟特地须要关上 layout.css.backdrop-filter.enabled 和 gfx.webrender.all 首选项才行；

个别不会有问题，所以请大家释怀。不过最好的实现呢，还是 先给元素设置一个半透明的背景色再加上这个 backdrop-filter 属性，这样即便用户的浏览器太古老不反对这个属性或者应用的是 Firefox，也能够看到半透明的背景来兜底。

具体也能够查看 MDN 上该属性对于各浏览器兼容度的阐明。

以至于为什么唯独 Firefox 有些问题，应该是早些版本的时候 WebRender 引发的一个 BUG，所以始终没有默认启用。我当初看帖子内还在探讨所以短期内有望了（优先级也曾经从 P1 降为 P3）。能够看这篇 BUG 反馈贴理解。

文章最初举荐一下那位同学肝的 UI 组件库，我感觉挺不错的，大伙能够去 点个 Star 打个 Call。
👉 Lew Design

如果不是他的组件库，我到当初都不晓得曾经有一个那么简略好用能够实现毛玻璃成果的 CSS 属性 了。

最初的最初，张大佬在他的新书中提了一嘴：

限度 backdrop-filter 属性大规模应用的惟一因素就是性能。如果你的页面非常复杂，有很多动画和频繁的交互行为，则 backdrop-filter 属性可能会造成卡顿，此时就须要酌情应用。

filter – CSS | MDN
backdrop-filter – CSS | MDN
Filter Effects Module Level 2 | W3C Editor’s Draft
CSS backdrop-filter 简介与苹果 iOS 毛玻璃成果 « 张鑫旭 - 鑫空间 - 鑫生存
Enable the CSS backdrop-filter property by default (letting it ride the trains to release)