background-attachment

background-attachment 屬性決定用戶滾動頁面時圖片的狀態。

三個可用屬性為 scroll(滾動)，fixed(固定) 和 inherit(繼承)。

inherit 單純地指定元素繼承他的父元素的 background-attachment 屬性。

為了正確地理解 background-attachment，首先需要明白頁面(page)和視口(view port)是如何協作地。

視口(view port)是瀏覽器顯示網頁的部分(就是去掉工具欄的瀏覽器)。

視口(view port)的位置固定，不變動。

當向下滾動網頁時，視口(view port)是不動的，而頁面的內容向上滾動。

看起來貌似視口(view port)向頁面下方滾動了。

如果設置 background-attachment: scroll，就設置了當元素滾動時，元素背景也必需隨著滾動。

簡而言之，背景是緊貼元素的。

這是 background-attachment 默認值。

用一個例子來更清楚地描述下：

background-image: url(test-image.jpg);

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll;

當向下滾動頁面時，背景向上滾動直至消失。

但是當設置 background-attachment 為 fixed 時，當頁面向下滾動時，背景要待在它原來的位置(相對於瀏覽器來說)。

也就是不隨元素滾動。

用另一個例子描述下：

background-image: url(test-image.jpg);

background-position: 0 100%;

background-repeat: no-repeat;

background-attachment: fixed;

頁面已經向下滾動了，但是圖像仍然保持可見。

需要重視的一點是背景圖只能出現在它父元素能達到的區域。

即使圖片是相對於視口(view port)定位地，如果它的父元素不可見，圖片就會消失。

參見下面的例子。

此例中，圖片位於視口(view port)的左下方，但是只有元素內的圖片部分是可見的。

background-image: url(test-image.jpg);

background-position: 0 100%;

background-repeat: no-repeat;

background-attachment: fixed;

因為圖片開始在元素之外，一部分圖片被切除了。

background-attachment 屬性增加了一個新值：

local。這是用來配合可以滾動的元素的(設置為 overflow: scroll; 的元素)。

當 background-attachment 設置為滾動(scroll)時，背景圖不會隨元素內容的滾動而滾動。

設置為 background-attachment :local; 時，背景圖會隨內容的滾動而滾動。