background-attachment屬性

今天遇到一個效果，就是有兩張圖片，一張在前，一張在後。當滑動滾動軸向下拉動時，第一張圖片是保持不動的，而第二張圖片直接覆蓋第一張圖片。咱們首先看下圖：

灰色表明瀏覽器窗口，而後分別有3個div，第二個div中放入背景圖，黑色圓球就表明背景圖。

此時，若是給第2個div加入background-attachment:fixed屬性，則會變成如圖所示：

背景圖跑到了瀏覽器窗口的最頂部。此時，背景圖脫離了第二個div，能夠說和第二個div幾乎沒有任何聯繫了，而是以視角進行定位。

啥叫以視角進行定位了，咱們啥時候對背景圖定位了？咱們在設置了背景圖的時候，是否是設置了background-position屬性，這個就是對背景圖進行定位了。什麼？沒寫這個屬性？不要緊，即便沒寫，這個屬性也有個默認值，即left top，視角的左上角。

注意，當黑色圓球背景圖設置了background-attachment:fixed屬性後，其實是被第一個div覆蓋的。爲了方便演示，設置了第一個藍色div的透明度。

當滾動軸向下拉時，只有第二個div通過的區域，黑色圓球能夠正常顯示（黑色圓球背景圖隸屬於第2個div，和第2個div中的內容屬於同一級，所以均能顯示。而其餘div通過背景圖時，會覆蓋住），如圖：

注意，黑色圓球背景圖此時是全黑，不是由於第2個div設置了透明度才顯示的

繼續向下拉，第3個div也會覆蓋，如圖

這樣，在視覺上就彷彿前一張圖片未動，然後一張圖片直接覆蓋在其之上了。