先丟擲需求：
有一張全域性大圖，中間有一層文字，文字的背景使用毛玻璃模糊。類似效果如下：

<!--html-->
<div id="w">
    <article>
        <p>123123123123</p>
        <p>123123123123</p>
        <p>123123123123</p>

        <div id="a">  </div>
    </article>
</div>

/*css*/
 

#w{
  background:url(bg_01.jpg) no-repeat center center fixed  ;
  width:100%;
  height:100%;
}
article{
  width:40%;
  height:1200px;
  margin:0 auto;
  text-align: center;
  z-index: 1;
  position: relative;
}
#a{
  position: absolute;
  width:500%;
  height:100%;
  margin-left:-150%;
  top:-10px;
  background:url(bg_01.jpg)
 
 no-repeat center center fixed  ;
  -webkit-filter: blur(0px);
  z-index: -1;
}

思路如下：
1）首先不能直接在背景層的元素中使用filter，因為這樣會把文字也模糊掉。

2）因此，解決的辦法就是另外增加一個層，用以放置模糊效果。然後使用絕對定位，讓它固定在想要有毛玻璃效果的區域性上，並設定z-index值小於父元素，讓它不要擋住上面那層文字。

3）在放置模糊效果的層上用與父元素一樣的背景，並用fixed值將其固定，形成背景重疊。（關鍵，必須要讓兩張背景圖重疊起來）若有超出部分可以用overfloat:hidden

使用JS控制scroll來改變filter的值可以讓畫面變的很炫酷。

/*js*/
$(function(){
    var a=0;
    var c = 1;
    $(window).scroll(function(){
        var b = $(this).scrollTop();
       // alert(b);
        if(b>98 && b<160){
            $("#a").css("-webkit-filter","blur("+c+"px)");
        }else if(b>160){
            $("#a").css("-webkit-filter","blur(2px)");
        } else if(b<100){
            $("#a").css("-webkit-filter","blur("+a+"px)");
        }
    })
});