本文將介紹一種巧用 background? 配合 backdrop- filter 來構(gòu)建有趣的透視背景效果的方式。

本技巧源自于一名群友的提問，如何構(gòu)建如 ElementUI[1] 文檔的一種頂欄背景特效，看看效果：

仔細(xì)看，在頁面的的滾動過程中，頂欄的背景不是白色的，也不是毛玻璃效果，而是能夠?qū)⒈尘邦w?；?/p>

準(zhǔn)確而言，是一種基于顆?；拿ＡЧ?，元素首先是被顆?；?，其次，元素的邊緣也是在一定程度上被虛化了。那么，我們該如何實(shí)現(xiàn)這個(gè)效果呢？

需求拆解

上述效果看似神奇，其實(shí)原理也非常簡單。主要就是顆?；谋尘?background加上backdrop-filter: blur() 即可。

首先，我們需要實(shí)現(xiàn)顆粒背景。

我們利用 background 實(shí)現(xiàn)這樣一個(gè)背景：

<div></div>

div {
    background: radial-gradient(transparent, #000 20px);
    background-size: 40px 40px;
}

從透明到黑色的徑向漸變效果如下：

需要注意的是，圖里的白色部分其實(shí)透明的，可以透出背后的背景。此時(shí)，如果背景后面有元素，效果就會是這樣：

好，我們將 background: radial-gradient(transparent, #000 20px) 中的黑色替換成白色，效果如下：

這里為了展示原理，每個(gè)徑向漸變的圓設(shè)置的比較大，我們把它調(diào)整回正常大?。?/p>

div {
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
}

這樣，我們就成功的將背景顆?；?/p>

當(dāng)然，此時(shí)透出的背景看上去非常生硬，也不美觀，所以，我們還需要 backdrop-filter: blur()，我們加上一個(gè)試試看：

div {
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
    backdrop-filter: blur(10px);
}

這樣，我們就實(shí)現(xiàn)了一開始所展示的效果：

這里需要注意的是，background-size 的大小控制，和不同的 backdrop-filter: blur(10px) 值，都會影響效果。

完整的 DEMO，你可以戳這里：CodePen Demo -- Mask Filter[2]。

當(dāng)然，掌握了這個(gè)技巧之后，我們可以嘗試替換掉 background: radial-gradient() 圖形，及改變 background-size，嘗試各種不同形狀的透視背景。簡單舉幾個(gè)例子：

div {
    background: linear-gradient(45deg, transparent, #fff 4px);
    background-size: 6px 6px;
    backdrop-filter: saturate(50%) blur(4px);
}

這里使用了 linear-gradient() 替換了 radila-gradient()：

最后

一個(gè)非常小的技巧，運(yùn)用在恰當(dāng)?shù)牡胤娇梢院芎玫奶嵘撁娴馁|(zhì)感，你學(xué)會了嗎？

本文到此結(jié)束，希望對你有幫助 :)

參考資料

[1]ElementUI: https://element-plus.gitee.io/zh-CN/。

[2]CodePen Demo -- Mask Filter: https://codepen.io/Chokcoco/pen/LYdWPbz。

[3]Github -- iCSS: https://github.com/chokcoco/iCSS。