CSS ----- 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;

 

因为图片开始在元素之外，一部分图片被切除了。