background-attachment的作用是設置背景圖片是隨滾動軸如何滾動的css屬性

background-attachment有四個可選值：fixed，scroll，local，inherit（就是單純地繼承父元素的屬性）

其中scroll和local屬性的作用相類似，當設置background-position的時候，他們的位置是相對於元素的邊框的，因此當我們滾動瀏覽器的滾動條的時候，它會跟隨著元素滾動條的滾動而滾動，並和元素一起因滾動而無法在視圖中被瀏覽者看見。

但是假如這個元素內部是具有滾動條的也就是設置了overflow：scroll，那麽background-attachment設置了scroll的話，背景圖片不會隨著內部滾動條的滾動而滾動，但是假如設置了local，那麽內容就會隨著滾動條的滾動而滾動。

使用scroll的內部帶有滾動條的元素內的背景圖片不會因為滾動條滾動而改變位置：

使用local的內部帶有滾動條的元素內的背景圖片則會因為滾動條滾動而改變位置

這是為什麽呢？這是因為準確來講，scroll相對於元素固定，而local是相對於元素內容固定。也就是說，在存在內部滾動條的情況下，scroll就相當於fixed，而local就相當於scroll。

上面就是scroll和local的區別

那麽接下來講一下fixed與scroll的區別，fixed設置後，與scroll的背景圖片位置相對於元素不同，fixed的背景圖片位置是相對於頁面可視區域的左上角的，元素的大小是背景圖片能夠顯示的範圍，當滾動過了這個範圍，背景圖片也將無法看見。fixed不會隨著滾動條的滾動而滾動，它只會固定在頁面中的某一個位置。這就是fixed與scroll的區別。

什麽是background-attachment