先來看看效果圖
複製**
**如下:
body
main
……去掉那些式樣方面的**，上面實現毛玻璃效果的核心**如下：
複製**
**如下:
body
main
當然這個效果離我們的期望還有點距離，因為單純的30%的透明度會讓文字變的難以閱讀。對頁面來說背景圖只是起美化作用，文字才是最核心的。你可以增大透明度的百分比，但這樣頁面會顯得很死板。為了讓文字便於閱讀，又保持頁面的生動活潑，可以對上面的mian標籤的背景做模糊處理。
你可能嘗試blur濾鏡，但可惜的是效果不對：
複製**
**如下:
main
用blur濾鏡會將文字也模糊掉，更看不清了，只能放棄。正確的做法是給mian標籤增加偽元素::before，在偽元素上使用blur濾鏡：（為了效果演示，加上了紅色背景色）
複製**
**如下:
main
main::before
可以看出blur效果是出來了，但導致了兩個問題。首先由於blur出現了**影，這個比較好解決，只要加上overflow: hidden;就行了。其次四周20px的模糊半徑範圍內模糊效果會程式設計客棧逐漸消退。如果對此比較介意，想讓四周的模糊效果和中間一樣，可以將偽元素尺寸外擴20px，為了保險起見，可以稍微再外擴一點到30px：
複製**
**如下:
main
main::before
最後將偽元素的紅色背景色替換成body的背景圖即可，效果如下。
總結以上就是css3實現毛玻璃效果的全部內容，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對我們的支援。
本文標題: 利用css3實現毛玻璃效果示例原始碼
本文位址: /web/css/23092.html
css毛玻璃效果白邊 css3毛玻璃效果白邊問題
1 毛玻璃實現方法 css3 blur濾鏡實現 如下測試 blur webkit filter blur 10px chrome,opera moz filter blur 10px ms filter blur 10px filter blur 10px 需要注意目前火狐不支援，其他些瀏覽器，如f...
css3毛玻璃模糊效果
css3 blur濾鏡實現 如下測試 需要注意目前火狐不支援，其他些瀏覽器，如firefox到目前還沒有支援css3 filter.當然，要實現 比方說 firefox 24瀏覽器上 變模糊的效果，也是可以的。可以使用svg的模糊濾鏡。新建文命名為blur.svg的svg檔案 xml version...
css實現毛玻璃效果
首先我們要知道實現毛玻璃效果的關鍵點 filter濾鏡 html 先寫乙個居中的div，並給body加上背景圖，以及居中的div設定背景顏色和透明度 body,html main 這裡我們不在此元素上寫filter屬性是因為其會導致內容的透明度改變，所以使用乙個可行的方法是為其新增偽元素效果如下圖 ...