背景附着
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); |
图4
当向下滚动页面时，背景向上滚动直至消失。
但是当设置background-attachment为fixed时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。
用另一个例子描述下：
| background-image: url(test-image.jpg); |
图5
页面已经向下滚动了，但是图像仍然保持可见。
需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地，如果它的父元素不可见，图片就会消失。参见下面的例子。此例中，图片位于视口(view port)的左下方，但是只有元素内的图片部分是可见的。
| background-image: url(test-image.jpg); |
图6
因为图片开始在元素之外，一部分图片被切除了。
