css實現毛玻璃效果

2021-10-21 02:32:01 字數 1086 閱讀 6438

首先我們要知道實現毛玻璃效果的關鍵點：filter濾鏡

html**
先寫乙個居中的div，並給body加上背景圖，以及居中的div設定背景顏色和透明度

body,


html 


.main
這裡我們不在此元素上寫filter屬性是因為其會導致內容的透明度改變，所以使用乙個可行的方法是為其新增偽元素效果如下圖

偽元素無法通過 width:100% 和 height:100% 來繼承父元素的尺寸，要用如下方式

.main::before
效果圖

這裡出現了兩個問題，乙個是元素內容被遮蓋，所以需要將偽元素的z-index降低；還有乙個問題就是body背景圖和偽元素的背景圖沒有無縫銜接，這裡是因為background-position沒有設定為相同

修改之後完整style：

body,


html 


.main 


.main::before
幾個background屬性這裡拆開寫了 也可以寫在一行background: url("./img/lamb.jpg") bottom / cover fixed；效果圖主要思想在於，背景圖中需要設定為毛玻璃的元素，對其元素新增filter: blur()屬性，將層級降低在元素下方防止遮擋內容，並將偽元素的背景圖和容器的背景圖無縫重疊便可以實現效果

css毛玻璃效果

毛玻璃其實就是磨砂玻璃，能夠模糊的看清背後的風景，讓人感覺有種朦朧美，讓介面看上去有些層次感。比如 高大上啊，接下來肯定是眼饞手癢的過程。當然，用ps搞乙個全景毛玻璃背景毫無疑問是最省事的，那接下來就沒啥事可幹了。當然no no no了。毛玻璃無疑就是種模糊了，少不了filter blur。最終效果...

CSS毛玻璃模糊效果

class comment bk class top blur div class top class iconfont icon pinglun i li div comments div div div comment bk comments top blur top 毛玻璃模糊效果的精髓我覺得...

css毛玻璃效果白邊 css3毛玻璃效果白邊問題

1 毛玻璃實現方法 css3 blur濾鏡實現 如下測試 blur webkit filter blur 10px chrome,opera moz filter blur 10px ms filter blur 10px filter blur 10px 需要注意目前火狐不支援，其他些瀏覽器，如f...