CSS教程:CSS背景全攻略(2)

background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

关键词是不用解释的。x 轴上：

• * left
• * center
• * right

y 轴上:

• * top
• * center
• * bottom

顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：

background-position: top right;

使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：

background-position: 100% 50%;

This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.

糖伴西红柿：这一段没想到合适的翻译，保留原文，意译。

update: 感谢天涯的指教，这段搞明白了。使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点，和元素的 100%(right) 50%(center) 这个点对齐。

这再一次说明了，我们一直认为已经掌握的简单的东西，其实还有我们有限的认知之外的知识。

注意原点总是左上角，最终的效果是笑脸图片被定位在元素的最右边，离元素顶部是元素的一半，效果和 background-position: right center; 一样。

背景附着

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;

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