點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
background-attachment相信有部分同學都沒有用過，甚至都還不知道有這個屬性吧，沒關係，從今天開始你就知道了。
兼容性方面，chrome是比較全面的。
取值方面，我們主要注意到它的兩個取值scroll和fixed。xcroll就是我們平常使用背景圖的效果看到的表現。而fixed則是背景相對於當前文檔社區定位，也就是說頁面再怎麼滾動背景圖片位置都是不動的。所以下面我們來重點關注一下取值fixed。
一、最簡單的視差效果
由取值fixed特性可以可知，實現一個簡單的視差自然不在話下。如下
三個DOM的樣式如下所示：
.g-img1 {
background-image: url("xxx");
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
看起來的效果就是這樣的：
這個屬性，看著很厲害的樣子，除此之外，它可以實現很多局部的效果。
二、局部效果實現
我在上面DOM里加一個div.box相對於session定位。
.box{
position: absolute;
left:250px;
top:100px;
width:100px;
height:100px;
background:inherit;
filter:blur(5px);
}
繼承父元素的背景圖，加了一個濾鏡模糊的屬性，這樣就實現的動態模糊效果（可以任意改變其位置屬性來模糊你想看到的任意位置）。
按這個思路，我們還可以做一個局部水紋效果，如下所示：
總結一下：
fixed有一個很大的侷限，大家可以想一想，測試一下。
閱讀更多 小鄭搞碼事 的文章
