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;
background-image:url(tools-sprites.png);
background-repeat:no-repeat;
background-position:-15px -30px;
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,这里需要注意的就是,第一个值是垂直方向的值,第二个值是水平方向的值,这里跟使用数字和百分比的两个数据值是相反的。