CSS Code复制内容到剪贴板
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 轴(垂直) 位置。
CSS Code复制内容到剪贴板
/* 例 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: right top;使用百分数时也类似。需要主要的是,使用百分数时,浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下:
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.










