1. 首頁 > 生活百科 > >

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

小知識it知識


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

文章插圖

3.2 利用 margin 屬性的負值擴大容器
模糊度的效果如下圖 ， 還是有差異 ， 因為 filter 是從容器外邊框向內聚合的一個濾鏡 ， 導致濾鏡外邊框有一個白圈
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

此時只需要擴大 ::before 元素的容器大小 ， 這里直接可使用 margin 屬性負值擴大容器
.card-filter::before { ...+ margin: -20px;}此時的效果就有點“那個意思了” ， 看來快可以交差了
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

3.3 ::after 填補消失的背景色
原本設置在 .card-filter 類上的 background-color: rgba(255, 255, 255, 0.72); 沒起作用！
因為 ::before 偽類作用于 .card-filter 元素內 ， 是其子元素 ， 又因為 ::before 的 background 屬性設置了背景圖 ， 遮蓋了父元素 .card-filter 的背景色 。
知道了原因 ， 那么我們就可以在 .card-filter 元素內再添加一個子元素（偽類） ， 用于設置背景色！
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

再偷個懶 ， 直接使用 ::after 偽類 ， 就不用改造 DOM 結構 。
.card-filter::after { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: rgba(255, 255, 255, 0.72);}此時 ， 效果就和 backdrop-filter 的效果相同：
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

放到“自研”的 Webview 內核中也能看到效果了！
四、總結總的來說 ， 如果能說服產品經理和 UI 小姐姐的話 ， 咱就用 backdrop-filter ， 說服不了就用 filter 的組合拳模擬吧！
另外 backdrop-filter 屬性是有性能問題的 ， 咱就是說 ， 都 2022 年了 ， 求求大家升級一下手上的設備吧！ ， 兼容性真讓前端工程師禿頭兒！
兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效

文章插圖

如果“毛玻璃”和背景沒有文中的相對移動 ， 直接讓 UI 小姐姐切個圖 ， 直接解決一切兼容性 & 性能問題！
在研究過程中 ， 筆者還嘗試過 SVG 的 feGaussianBlur 標簽 ， 效果和 filter 一樣 ， 會稍微復雜一些 ， 不過也是個可施行的方案 ， 大家可自行嘗試下～
原文地址：https://juejin.cn/post/7070325873202692104
（學習視頻分享：web前端）
以上就是聊聊使用CSS怎么實現毛玻璃特效（兼容方案探究）的詳細內容 ， 更多請關注電腦自學網其它相關文章！
【兼容方案探究 聊聊使用CSS怎么實現毛玻璃特效】

推薦閱讀