1. 首頁 > 生活百科 > >

兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

小知識it知識

使用CSS怎么實現毛玻璃特效？下面本篇文章給大家介紹一下使用CSS實現毛玻璃特效（兼容方案探究）的方法 ， 希望對大家有所幫助！

兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

前一段時間在某項目中用到了“高斯模糊”的濾鏡效果 ， 過程中嘗試了多種方案 ， 這里總結一種方式 ， 希望可以幫助到有需要的道友～
UI 小姐姐非要讓我在 Android 系統自定義的 Webview 上支持實現我們俗稱的“毛玻璃”效果 ， 說是一定要實現 ， 不實現這種效果就失去了設計的靈魂 ， 奈何我百般解釋 ， 她就要 ， 就要 ， 要！
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

沒辦法 ， 研究一下子咯！
【推薦學習：css視頻教程】
一、backdrop-filter 是金手指嗎？毛玻璃效果在 iOS 系統上比較常見 ， 比如消息通知欄、手機助手卡片等地方 ， 所以咱打開蘋果官網看看！
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

果不其然 ， 導航欄就用到了“家族式設計”的“毛玻璃”特效
打開控制臺抄一抄作業：
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

主要是用到了 backdrop-filter CSS3 的屬性 ， 于是乎 ， 順手就用上了 。
主要的卡片 CSS 代碼如下：
.card-backdrop-filter { position: relative; z-index: 1; width: 600px; height: 300px; border-radius: 6px; padding: 10px; color: #fff; font-size: 16px; overflow: hidden; margin: 100px auto; backdrop-filter: blur(10px); background-color: rgba(255,255,255,0.72); }在 Chrome 瀏覽器看著效果還可以：
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

然后再到某臺老 Android 版本的移動端上看看 ， 結果不行了?。?！
去查了查兼容性：backdrop-filter -- caiuse
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

emmm～ ， 再考慮到我司自己魔改的 Webview 內核情況 。 。 。
需要再尋求另外的方式 ， 這里補充一下子 ， filter 可以理解為濾鏡 ， backdrop-filter 就是給背景設置濾鏡效果 ， CSS 目前支持的濾鏡效果有
blur(): 模糊brightness(): 亮度contrast(): 對比度drop-shadow(): 陰影grayscale(): 灰度hue-rotate(): 色相旋轉invert(): 反色opacity(): 透明度saturate(): 飽和度sepia(): 褐色如果不考慮兼容性 ， backdrop-filter 會在不支持的瀏覽器上直接顯示背景色 ， 也就是失去設定的效果（“體驗降級”） 。
如果 UI 小姐姐和 PM 大哥能同意的話 ， 也是非常推薦大家使用 ， 畢竟誰不想早下班學習吶？
二、filter 試一試？另一個設置模糊度的 CSS 屬性就是 filter ， 那么我們的另一個思路就是通過 filter 來模擬 backdrop-filter 屬性的效果 。
且 filter 的兼容性會更好：filter -- caiuse
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

我們看看 filter 和 backdrop-filter 效果的差異：
/* filter 的寫法 ， 將 backdrop-filter 屬性替換為 filter */.card-filter { position: relative; z-index: 1; width: 600px; height: 300px; border-radius: 6px; padding: 10px; color: #fff; font-size: 16px; overflow: hidden; /* 隱藏超出元素區域外的內容 */ margin: 100px auto; filter: blur(10px); background-color: rgba(255,255,255,0.72);}
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

這效果和實際的設計需求大相徑庭 ， 因此還需要改改！
三、filter 的組合拳因為 filter 設置的是整個元素的模糊度 ， 而不是做用于元素的背景容器 ， 所以需要一個和卡片等大小的占位元素來單獨設置模糊度 ， 并作為背景元素 。
3.1 ::before + 固定雙背景圖
這里偷個懶 ， 直接使用了偽元素 ::before ， 實際場景為了考慮兼容性 ， 建議大家還是用 div 塊級元素占位
.card-filter::before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; /* 放到當前 card-filter 元素的底部 */ filter: blur(10px); /* 模糊度 */ background: url(http://p2.qhimg.com/bdr/__85/t01781bd4b1218329e1.jpg) no-repeat center fixed; background-size: cover;}這里注意到 ， 卡片采用了和整個容器的背景圖屬性是一樣的 ， 通過 fixed 方式固定背景圖 ， 這樣當元素在任意方向滾動的時候 ， 背景圖不會移動 ， 能保證背景效果是一致的

推薦閱讀