background-position

background-position 属性用来设置背景图片填充在元素的哪个位置，可以使用三种方式来设置 background-position 属性的值：

 

1、数字：background-position:x y 

x 和 y 是数字，此数字可以是正数也可以是负数，图片的左上角将与这个位置对齐， 如果只指定了一个值，这个值指示 x, y 值默认为 50%，使用如使用以下图片来设置元素的背景图片：

 

这幅图片中有很多小按钮，每一个按钮的大小是 15 个像素，如果要把第三行第二个图片设置为某个元素的背景，可以使用以下 CSS:

.btn {

	background-image:url(tools-sprites.png);

	background-repeat:no-repeat;

	background-position:-15px -30px;

width:15px; height:15px; 

}

 上面中使用了两个负数，这样第三行第二个图片就刚好显示在元素中了。越到下面的图片，这个负数值就越大。

 

2、使用百分比：background-position:0% 0%

百分比是相对于元素的宽度，如 background-position:50% 50%, 那么背景图片将显示在元素的中间，如 background-position:100% 50%, 背景图片将显示在右边，垂直的中间。

 

3、使用关键字：background-position:vertical horizontal

垂直关键字有：top、center、bottom, 水平关键字有：left、center、right，这里需要注意的就是，第一个值是垂直方向的值，第二个值是水平方向的值，这里跟使用数字和百分比的两个数据值是相反的。