CSS背景属性Background详解
下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴（水平）位置，第二个是 y 轴（垂直） 位置。
/* 例 1： 默认值 */
background-position： 0 0; /* 元素的左上角 */
/* 例 2： 把图片向右移动 */
background-position： 75px 0;
/* 例 3： 把图片向左移动 */
background-position： -75px 0;
/* 例 4： 把图片向下移动 */
background-position： 0 100px;
background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x 轴上：
* left
* center
* right
y 轴上：
* top
* center
* bottom
顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：
background-position： top right;
使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：
background-position： 100% 50%;
使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基 点。不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。例如上例的 background-position： 100% 50%; 就是将背景图片的 100%（right） 50%（center） 这个点，和元素的 100%（right） 50%（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 时，当页面向下滚动时，背景要待在它原来的位置（相对于浏览器来说）。也就是不随元素滚动。
- ·09/291997年至2009年 中国电子商务十二年大事记
- ·09/29js中的文档模式-document.compatMode
- ·09/29轻松搞定IE的CSS制作网页技巧3则
- ·09/29Adobe Flash：腹背受敌与何去何从
- ·09/27网络时代下商品评价的重要性
- ·09/27轻松搞定IE的CSS制作网页技巧3则
- ·09/27卢松松：如何修改源码的网页模板？
- ·09/27名师讲堂之Kent Beck——响应式设计
- ·09/26分享英文音乐网站的经营经验
- ·09/2617个Joomla教程和模板网站