HTML代碼：

CSS思路：第一層就是把背景圖片扔進(jìn)去。第二層要設(shè)置毛玻璃高度，和overflow: hidden;。第三層的背景還是背景圖片哦，然后加了filter: blur(5px);。這樣就好了喲。才怪。

怎么讓毛玻璃邊緣也很模糊呢？我們讓毛玻璃層比我們實際需要的尺寸大，然后設(shè)置父元素overflow: hidden;去掉周圍一圈不夠模糊的就行了。腦海中能浮現(xiàn)出畫面嗎哈哈。

這里blur-box層高是42px，我們讓blur層高62px，然后position: absolute; top: -10px;。 top: -10px;使blur層上移了10px，這樣blur層比blur-box層上面多了10px，下面多了10px，然后用blur-box層的overflow: hidden;給遮擋掉，是不是就得到了完美的毛玻璃呢~

這里面還有一點比較關(guān)鍵，那就是毛玻璃的背景怎么和最底層的背景重合呢？在這里，背景圖片實際高度是180px，我們設(shè)置background層高度170px， background-position: center bottom;，這樣把背景圖案頂部10px丟掉了對吧，再設(shè)置blur層background-position: center top;，發(fā)現(xiàn)沒，這個是保留了頂部10px的喲，不過注意之前已經(jīng)設(shè)置過top: -10px;，這樣就也丟掉了背景圖案頂部10px，兩者就重合了。

CSS代碼。

.background{
  width: 100%;
  height: 170px;  /*要添加的背景圖片實際高度為180px*/
  background: url(http://i0.hdslb.com/bfs/archive/c456071489832adc92028e5ee4fc10e28350678f.jpg) no-repeat center bottom;
}
.blur-box{
  height: 42px;  /*最終展示的毛玻璃高度*/
  overflow: hidden;
  position: relative;
}
.blur{
  background: url(http://i0.hdslb.com/bfs/archive/c456071489832adc92028e5ee4fc10e28350678f.jpg) no-repeat center top;
  position: absolute;
  width: 100%; /*設(shè)置positon為absolute后，若不設(shè)置width，由于div是空的，導(dǎo)致width為0*/
  height: 62px;  /*毛玻璃高度要比最終的高度大才行*/
  top: -10px;  /*上移10px*/
  padding: 0 20px;
  left: -20px;  /*設(shè)置paddig和left是為了左右邊緣也模糊度好*/
  filter: blur(5px);  /*設(shè)置模糊度*/
}

在Chrome和Firefox下顯示都OK，在Opera中沒有模糊效果，.blur添加-webkit-filter: blur(5px);即可。

最后，給你們看下padding: 0 20px; left: -20px;的效果。為了更容易觀察，我把.background的width: 100%;去掉，改為width: 800px; margin: 0 auto;，再去掉.blur-box的overflow: hidden;，然后就變成這樣啦↓

好玩吧哈哈哈...