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

2009-09-17 14:57 出处：PConline 作者：前端观察糖伴西红柿责任编辑：lizhiyan

　　背景平铺(background-repeat)

　　设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：

background-repeat: repeat; /* 默认值，在水平和垂直方向平铺 */
background-repeat: no-repeat; /* 不平铺。图片只展示一次。 */
background-repeat: repeat-x; /* 水平方向平铺(沿 x 轴) */
background-repeat: repeat-y; /* 垂直方向平铺(沿 y 轴) */
background-repeat: inherit; /* 继承父元素的 background-repeat 属性*/

　　背景定位(background-position)

　　background-position属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。

　　下面的例子中，设置了一个背景图片并且用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;

CSS背景全攻略
图2

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

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

　　·* left
　　·* center
　　·* right

　　y 轴上:

　　·* top
　　·* center
　　·* bottom

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

background-position: top right;

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

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

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

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

CSS背景全攻略
图3