在CSS中，我们可以使用background-position属性来定义背景图片的位置。

语法：

background-position: 像素值/关键字;

说明：

background-position属性常用取值有两种：一种是“像素值”；另外一种是“关键字”（这里不考虑百分比取值）。

一、像素值

当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。

语法：

background-position: 水平距离 垂直距离;

说明：

水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:40px 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

background-position属性设置的两个值是相对该元素的左上角来说的，我们从上图就可以很直观地看出来。

二、关键字

当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。

语法：

background-position: 水平距离 垂直距离;

说明：

background-position属性的关键字取值如下表所示。

表1 关键字
属性值 说明
top left 左上
top center 靠上居中
top right 右上
center left 居中靠左
center center 正中
center right 居中靠右
bottom left 左下
bottom center 靠下居中
bottom right 右下

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:center right;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

background-position:right center;中的“right center”，表示相对于左上角，水平方向在右边（right），垂直方向在中间（center）。

在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）。对于CSS Spirit技术，我们会在本系列的CSS进阶中再去深入介绍。