本文將介紹一種巧用 background 配合 backdrop- filter 來構建有趣的透視背景效果的方式，
本技巧源自于一名群友的提問，如何構建如 ElementUI 檔案的一種頂欄背景特效，看看效果：
仔細看，在頁面的的滾動程序中，頂欄的背景不是白色的，也不是毛玻璃效果，而是能夠將背景顆粒化：
準確而言，是一種基于顆粒化的毛玻璃效果，元素首先是被顆粒化，其次，元素的邊緣也是在一定程度上被虛化了，那么，我們該如何實作這個效果呢？
需求拆解
上述效果看似神奇，其實原理也非常簡單，主要就是顆粒化的背景 background加上backdrop-filter: blur() 即可，
首先，我們需要實作顆粒背景，
我們利用 background 實作這樣一個背景：
<div></div>
div {
background: radial-gradient(transparent, #000 20px);
background-size: 40px 40px;
}
從透明到黑色的徑向漸變效果如下：
需要注意的是，圖里的白色部分其實透明的，可以透出背后的背景，此時，如果背景后面有元素，效果就會是這樣：
好，我們將 background: radial-gradient(transparent, #000 20px) 中的黑色替換成白色，效果如下：
這里為了展示原理，每個徑向漸變的圓設定的比較大，我們把它調整回正常大小：
div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
}
這樣，我們就成功的將背景顆粒化：
當然，此時透出的背景看上去非常生硬，也不美觀，所以，我們還需要 backdrop-filter: blur()，我們加上一個試試看：
div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
backdrop-filter: blur(10px);
}
這樣，我們就實作了一開始所展示的效果：
這里需要注意的是，background-size 的大小控制，和不同的 backdrop-filter: blur(10px) 值，都會影響效果，
完整的 DEMO，你可以戳這里：CodePen Demo -- Mask Filter
當然，掌握了這個技巧之后，我們可以嘗試替換掉 background: radial-gradient() 圖形，及改變 background-size，嘗試各種不同形狀的透視背景，簡單舉幾個例子：
div {
background: linear-gradient(45deg, transparent, #fff 4px);
background-size: 6px 6px;
backdrop-filter: saturate(50%) blur(4px);
}
這里使用了 linear-gradient() 替換了 radila-gradient()：
最后
一個非常小的技巧，運用在恰當的地方可以很好的提升頁面的質感，你學會了嗎？
本文到此結束，希望對你有幫助 ??
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500933.html
標籤：Html/Css
上一篇：SASS 運算 (Operations)符的基本使用
下一篇：【JavaScript資料網格】上海道寧51component為你帶來企業JS開發人員首選的資料網格——AG Grid