背景定位——background-position属性

背景定位——background-position属性

background-position属性用于控制背景图片在元素中的位置。这个位置指定的是图片左上角相对于元素左上角的位置。

在下面的例子中，使用background-position属性来控制背景图片的位置，同时设置background-repeat为no-repeat；单位是像素；第一个数字表示水平（x轴）位置，第二个数字表示是垂直（y轴）位置：

/* 例1：默认值 */

background-position: 0 0; 

/* 图片左上角对齐元素的左上角 */

/* 例2：把图片向右边移动75像素 */

background-position:75px 0;

/* 例3：把图片向左移动75像素 */

background-position:-75px 0;

/* 例4：把图片向下移动100像素 */

background-position: 0 100px;

如下图所示：

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)这个点进行对齐的。如下图所示：