金融高薪领域-Python量化交易工程师养成实战-编程猿分享

2023-02-16 15:21 作者:bili_24860316131 0人读过 | 我要投稿

CSS完成毛玻璃效果的一种新方式

Python量化交易工程师养成实战-金融高薪领域

在查看组件样例的时分呢，发现了他的的遮罩能够把整个页面添加毛玻璃效果！我就很诧异。马上就 F12查看了一下他的完成方式，由于在我映像里还没有一个很简单的的能够直接完成背景元素毛玻璃效果的方式。

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

CodePen 上的写的比拟杂乱，有很多无关的款式内容，我简化处置了一下

早年最初的毛玻璃效果就是上面的 Demo 这样的，先在外部容器上添加背景图，并且在当前 "窗口" 上设置一样的背景图，再应用 filter: blur() 属性含糊遮罩层的背景。

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

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

能够看到，比最初的毛玻璃完成方式少了一个伪类元素，并且他会直接把遮住的局部添加滤镜效果，不需求思索被遮住的内容了，也不会影响内部元素。也就是说能够“不受限制”的完成毛玻璃效果。例如在文章最开端提到的，给整个页面元素都加上遮罩。

这在以前只能经过 canvas 成当前页面快照的方式生来完成，能够很明显的觉得到早些时分投入和报答的不成比例，但是如今运用 filter: blur() 能够很轻松的就完成了，投入产出比极高！

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

毛玻璃效果在前端圈构成讨论是在 iOS 7 面世的时分，和高斯含糊不同，毛玻璃的效果不是让当前元素含糊，而是让当前元素所在区域后面的内容含糊...
... iOS 7 面世两年后，iOS 9 支持了一个名为 backdrop-filter 的 CSS 属性，它能够十分便当的完成毛玻璃效果.....

能够看到由于苹果提出的特性，所以在 Safari 上的完成会很早（iOS 9 也就是说 2015 年就曾经支持了 😱），之后其他阅读器关于该属性的支持都是在 2019 年左右。

关于运用方面，固然还是处于草案阶段，但是各个现代阅读器曾经不同水平的支持了这个属性（2022年07月26日）：

Chrome 76+ 、 Edge 17+ 和 Opera 63+ 曾经圆满支持(Full support)，
Safari 9+ 和 iOS Safari 9+ 需求运用 -webkit- 前缀；
Firefox 70+ 比拟特别需求翻开 layout.css.backdrop-filter.enabled 和 gfx.webrender.all 首选项才行；

普通不会有问题，所以请大家放心。不过最好的完成呢，还是先给元素设置一个半透明的背风光再加上这个 backdrop-filter 属性，这样即便用户的阅读器太陈旧不支持这个属性或者运用的是 Firefox，也能够看到半透明的背景来兜底。

以致于为什么唯独 Firefox 有些问题，应该是早些版本的时分 WebRender 引发的一个BUG，所以不断没有默许启用。我如今看帖子内还在讨论所以短期内无望了（优先级也曾经从P1降为P3）。

文章最后引荐一下那位同窗肝的UI组件库，我觉得挺不错的，大伙能够去点个Star打个Call。

假如不是他的组件库，我到如今都不晓得曾经有一个那么简单好用能够完成毛玻璃效果的CSS属性了。

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

限制 backdrop-filter 属性大范围运用的独一要素就是性能。假如你的页面十分复杂，有很多动画和频繁的交互行为，则 backdrop-filter 属性可能会形成卡顿，此时就需求酌情运用。