毛玻璃效果做的好能使頁面顯得非常生動立體。直接上圖
body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 serif; background: url("iphone.jpg") fixed 0 center; background-size: cover;}main { margin: 0 auto; padding: 1em; max-width: 30em; border-radius: .3em; box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6); text-shadow: 0 1px 1px hsla(0,0%,100%,.3); background: hsla(0,0%,100%,.3);}<main>……</main>去掉那些式樣方面的代碼，上面實現毛玻璃效果的核心代碼如下：
body { … background: url("iphone.jpg") fixed 0 center; background-size: cover;}main { … background: hsla(0,0%,100%,.3);}當然這個效果離我們的期望還有點距離，因為單純的30%的透明度會讓文字變的難以閱讀。對頁面來說背景圖只是起美化作用，文字才是最核心的。你可以增大透明度的百分比，但這樣頁面會顯得很死板。為了讓文字便于閱讀，又保持頁面的生動活潑，可以對上面的mian標簽的背景做模糊處理。
你可能嘗試blur濾鏡，但可惜的是效果不對：
main { … -webkit-filter: blur(3px); filter: blur(3px);}用blur濾鏡會將文字也模糊掉，更看不清了，只能放棄。正確的做法是給mian標簽增加偽元素::before，在偽元素上使用blur濾鏡：（為了效果演示，加上了紅色背景色）
main { position: relative; …}main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; -webkit-filter: blur(20px); filter: blur(20px); background: rgba(255,0,0,.5);}可以看出blur效果是出來了，但導致了兩個問題。首先由于blur出現了外陰影，這個比較好解決，只要加上 overflow: hidden; 就行了。其次四周20px的模糊半徑范圍內模糊效果會逐漸消退。如果對此比較介意，想讓四周的模糊效果和中間一樣，可以將偽元素尺寸外擴20px，為了保險起見，可以稍微再外擴一點到30px：
main { … overflow: hidden;}main::before { … margin: -30px;}最后將偽元素的紅色背景色替換成body的背景圖即可，效果如下。你也可以點擊 這里 ，右鍵查看完整的源代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
