正在阅读：新手必看!CSS背景background使用攻略新手必看!CSS背景background使用攻略

　　背景附着

　　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 默认值。

　　用一个例子来更清楚地描述下：

图4

　　当向下滚动页面时，背景向上滚动直至消失。

　　但是当设置background-attachment为fixed时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。

　　用另一个例子描述下：

图5

　　页面已经向下滚动了，但是图像仍然保持可见。

　　需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地，如果它的父元素不可见，图片就会消失。参见下面的例子。此例中，图片位于视口(view port)的左下方，但是只有元素内的图片部分是可见的。

图6

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