毛玻璃效果做的好能使頁面顯得非常生動立體泌参。直接上圖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);}……去掉那些式樣方面的代碼深员，上面實現(xiàn)毛玻璃效果的核心代碼如下：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出現(xiàn)了外陰影，這個比較好解決昨悼，只要加上overflow: hidden;就行了蝗锥。其次四周20px的模糊半徑范圍內(nèi)模糊效果會逐漸消退。如果對此比較介意率触，想讓四周的模糊效果和中間一樣终议，可以將偽元素尺寸外擴20px，為了保險起見，可以稍微再外擴一點到30px：main {? ? …? ? overflow: hidden;}main::before {? ? …? ? margin: -30px;}最后將偽元素的紅色背景色替換成body的背景圖即可穴张，效果如下细燎。你也可以點擊這里，右鍵查看完整的源代碼皂甘。
CSS3 毛玻璃效果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門档冬，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人桃纯，你說我怎么就攤上這事酷誓。” “怎么了态坦？”我有些...
- 文/不壞的土叔 我叫張陵盐数，是天一觀的道長。 經(jīng)常有香客問我伞梯，道長玫氢，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任谜诫，我火速辦了婚禮漾峡，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘喻旷。我一直安慰自己生逸，他們只是感情好，可當我...
- 文/花漫 我一把揭開白布且预。 她就那樣靜靜地躺著槽袄，像睡著了一般。 火紅的嫁衣襯著肌膚如雪锋谐。 梳的紋絲不亂的頭發(fā)上遍尺，一...
- 文/蒼蘭香墨 我猛地睜開眼康铭，長吁一口氣：“原來是場噩夢啊……” “哼惯退！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起从藤，我...
- 正文 年R本政府宣布，位于F島的核電站在刺，受9級特大地震影響逆害，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蚣驼，卻給世界環(huán)境...
- 文/蒙蒙 一忍燥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧隙姿，春花似錦梅垄、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至欲鹏，卻和暖如春机久，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背赔嚎。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 1喘落、垂直對齊 如果你用CSS茵宪，則你會有困惑：我該怎么垂直對齊容器中的元素？現(xiàn)在瘦棋，利用CSS3的Transform稀火，...
- 一服球、在什么場景下會出現(xiàn)外邊距合并？如何合并颠焦？如何不讓相鄰元素外邊距合并斩熊？給個父子外邊距合并的范例 在CSS當中，相...
