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

Python量化交易工程師養(yǎng)成實(shí)戰(zhàn)-金融高薪領(lǐng)域

download：https://www.51xuebc.com/thread-535-1-1.html

在查看組件樣例的時(shí)分呢，發(fā)現(xiàn)了他的的遮罩能夠把整個(gè)頁面添加毛玻璃效果！我就很詫異。馬上就 F12查看了一下他的完成方式，由于在我映像里還沒有一個(gè)很簡單的的能夠直接完成背景元素毛玻璃效果的方式。

其實(shí)不光是抽屜組件，其它的一些類 Modal 帶有遮罩的組件都有這個(gè)毛玻璃的效果，大伙能夠點(diǎn)點(diǎn)看看。
好了，不多廢話直接開端正題。

CodePen 上的 寫的比擬雜亂，有很多無關(guān)的款式內(nèi)容，我簡化處置了一下

早年最初的毛玻璃效果就是上面的 Demo 這樣的，先在外部容器上添加背景圖，并且在當(dāng)前 "窗口" 上設(shè)置一樣的背景圖，再應(yīng)用 filter: blur() 屬性含糊遮罩層的背景。

但是這個(gè)會(huì)有一個(gè)問題，就是需求把濾鏡屬性 filter: blur() 設(shè)置在一個(gè)單獨(dú)的背景元素或者偽類上，不然會(huì)把 窗口 內(nèi)部的內(nèi)容也給含糊了。并且會(huì)受限制這個(gè)我們在后面說。

而是運(yùn)用新濾鏡屬性 backdrop-filter: blur() 后的呢，就非常的簡單了，能夠看下方 演示Demo：

能夠看到，比最初的毛玻璃完成方式少了一個(gè)偽類元素，并且他會(huì)直接把遮住的局部添加濾鏡效果，不需求思索被遮住的內(nèi)容了，也不會(huì)影響內(nèi)部元素。也就是說能夠“不受限制”的完成毛玻璃效果。例如在文章最開端提到的，給整個(gè)頁面元素都加上遮罩。

這在以前只能經(jīng)過 canvas 成當(dāng)前頁面快照的方式生來完成，能夠很明顯的覺得到早些時(shí)分投入和報(bào)答的不成比例，但是如今運(yùn)用 filter: blur() 能夠很輕松的就完成了，投入產(chǎn)出比極高！

那這么棒的CSS屬性是什么時(shí)分被提出的呢？

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

毛玻璃效果在前端圈構(gòu)成討論是在 iOS 7 面世的時(shí)分，和高斯含糊不同，毛玻璃的效果不是讓當(dāng)前元素含糊，而是讓當(dāng)前元素所在區(qū)域后面的內(nèi)容含糊...
... iOS 7 面世兩年后，iOS 9 支持了一個(gè)名為 backdrop-filter 的 CSS 屬性，它能夠十分便當(dāng)?shù)耐瓿擅ＡЧ?....

能夠看到由于蘋果提出的特性，所以在 Safari 上的完成會(huì)很早（iOS 9 也就是說 2015 年就曾經(jīng)支持了 ??），之后其他閱讀器關(guān)于該屬性的支持都是在 2019 年左右。

關(guān)于運(yùn)用方面，固然還是處于草案階段，但是各個(gè)現(xiàn)代閱讀器曾經(jīng)不同水平的支持了這個(gè)屬性（2022年07月26日）：

• Chrome 76+ 、 Edge 17+ 和 Opera 63+ 曾經(jīng)圓滿支持(Full support)，
• Safari 9+ 和 iOS Safari 9+ 需求運(yùn)用 -webkit- 前綴；
• Firefox 70+ 比擬特別需求翻開 layout.css.backdrop-filter.enabled 和 gfx.webrender.all 首選項(xiàng)才行；

普通不會(huì)有問題，所以請大家放心。不過最好的完成呢，還是先給元素設(shè)置一個(gè)半透明的背風(fēng)光再加上這個(gè) backdrop-filter 屬性，這樣即便用戶的閱讀器太陳舊不支持這個(gè)屬性或者運(yùn)用的是 Firefox，也能夠看到半透明的背景來兜底。

以致于為什么唯獨(dú) Firefox 有些問題，應(yīng)該是早些版本的時(shí)分 WebRender 引發(fā)的一個(gè)BUG，所以不斷沒有默許啟用。我如今看帖子內(nèi)還在討論所以短期內(nèi)無望了（優(yōu)先級(jí)也曾經(jīng)從P1降為P3）。

文章最后引薦一下那位同窗肝的UI組件庫，我覺得挺不錯(cuò)的，大伙能夠去點(diǎn)個(gè)Star打個(gè)Call。

假如不是他的組件庫，我到如今都不曉得曾經(jīng)有一個(gè)那么簡單好用能夠完成毛玻璃效果的CSS屬性了。

最后的最后，張大佬在他的新書中提了一嘴：

限制 backdrop-filter 屬性大范圍運(yùn)用的獨(dú)一要素就是性能。假如你的頁面十分復(fù)雜，有很多動(dòng)畫和頻繁的交互行為，則 backdrop-filter 屬性可能會(huì)形成卡頓，此時(shí)就需求酌情運(yùn)用。