在第一部分主要和大家一起探讨了 CSS background属性中的background-image、background-repeat、background-attachment等属性。今天接着和大家一起来探讨其另外三个子属性，即 background-position、background-clip 和 background-origin。感兴趣的同学请继续往下阅读！

图像位置

你可能已经注意到了，当背景图像在背景层的平铺方式为 background-repeat:no-repeat时，背景图像位于元素背景层的左上角，也就是 Web 坐标系统的 0 0位置（边框盒子<border-box>内侧边缘，内距盒子<padding-box>外侧边缘，它是由 background-origin属性来定义的）：

这是背景图像的初始位置，即 background-position 的初始值（left top，计算值是 0% 0%）。换句话说，可以使用 background-position 属性来调整背景图像在元素背景层中的初始位置。

background-position: <bg-position>#

<bg-position> = [ left | center | right | top | bottom | <length-percentage> ]
                | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]
                | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

从语法规则上不难发现，background-position 属性的值可以是 top、right、bottom、left 和 center 等关键词，比如：

.element {
    background-position: left top; /* 等同于 top left */
}

background-position 属性值为关键词时，它的顺序并无关紧要，比如：

.element {
    background-position: left top;

    /* 等同于 */
    background-position: top left;
}

不过，使用关键词时，不能是同时使用同一轴的关键词，比如下面这样的声明是无效的：

/* 无效的 CSS 声明 */
.element {
    background-position: left right;
    background-position: right left;
    background-position: top bottom;
    background-position: bottom top;
}

background-position 属性值除了可取关键词之外，还可以是 CSS 的 <length-percentage>（长度百分比）值，比如《图解CSS：CSS 的值和单位》中介绍的 px、em、rem、vw 和 %等：

.element {
    background-position: 20px 20px;

    background-position: 2rem 10em;

    background-position: 20% 30%;

    background-position: 20px 50%;
}

如果background-position的值为<length-percentage>时，第一个值对应的x轴的偏移量，第二个值是对应的y轴的偏移量：

需要注意的是，background-position 取值为 % 时，它的计算相对来说要复杂一些，稍后我们会单独来阐述 background-position 取 % 值的计算。

另外，background-position 属性还可以是关键词和<length-percentage>混合在一起使用，比如：

.element {
    background-position: 50px top;
}

只不过，关键词和<length-percentage>混合在一起使用时，顺序非常重要，第一个值表示水平轴，第二个值表示垂直轴。因此，在混合使用的时候，需要注意它们的顺序，比如：

.element {
    background-position: left 50%; /* 有效的声明 */

    background-position: 50% left; /* 无效的声明 */
}

从上面的示例中我们可以获知，<position> 定义了一组 (x, y) 坐标（我们所熟悉的 Web 坐标），默认是相对于<border-box>内边缘来计算位移量（即边框内缘边为起始位置），但可以使用 background-origin 来改变。而且 <position> 除了上面示例中展示的取两个值之外，还有可以是取一个值、三个值，甚至是四个值，而且不同个数的值，所代表的含义以及所起的使用是不同的。接下来，我们分别来看看 <position> 取不同数量的值，应该如何使用。

一个值

当 background-position 属性只显式设置了一个值时，它可能会有以下几种情景。

如果显式设置的值是 left 或 right，则表示x轴值，相应的y轴值默认为 center：

.element {
    background-position: left; /* 等同 left center 或 left 50% */

    background-position: right; /* 等同 right center 或 right 50% */
}

如果显式设置的值是 top 或 bottom，则表示y轴的值，相应的x轴的值默认为 center：

.element {
    background-position: top; /* 等同 center top 或 50% top */

    background-position: bottom; /* 等同 center bottom 或 50% bottom */
}

如果显式设置的值是 center，则表示 x轴和y轴的值都是 center，相当于 center center或50% 50%，这个时候，背景图片的中心位置和元素背景层的中心位置会完全重叠，即背景图片在背景层中水平垂直居中。

.element {
    background-position: center; /* 等同 center center 或 50% 50% */
}

如果显式设置的值是 <length-percentage>（<length>或<percentage>），则表示x轴的值，相应的y轴的值默认为 center或50%：

.element {
    background-position: 50px; /* 等同于 50px center 或 50px 50% */

    background-position: 2vw; /* 等同于 2vw center 或 2vw 50% */

    background-position: 4%; /* 等同于 5% center 或 4% 50% */
}

两个值

如果 background-position属性取两个值，则第一个是水平方向（x轴）的偏移量，第二个值是垂直方向（y轴）的偏移量。它可能会有以下几种情景。

每个值可以是top、right、bottom、left 或 center中的一个。如果给出left或right，那么它们定义的是 x 轴的位置，另一个定义的是y轴的位置；如果给出 top 或 bottom，那么它们定义的是 y 轴的位置，另一个定义的是 x 轴的位置：

.element {
    background-position: left top;      /* x » left, y » top */

    background-position: top left;      /* x » left, y » top */

    background-position: left bottom;   /* x » left, y » bottom  */

    background-position: bottom left;   /* x » left, y » bottom  */

    background-position: right top;     /* x » right, y » top */

    background-position: top right;     /* x » right, y » top */

    background-position: right bottom;  /* x » right, y » bottom */

    background-position: bottom right;  /* x » right, y » bottom */

    background-position: left center;   /* x » left, y » center */

    background-position: center left;   /* x » left, y » center */

    background-position: top center;    /* x » top, y » center */

    background-position: center top;    /* x » center, y » top */

    background-position: right center;  /* x » right, y » center */

    background-position: center right;  /* x » right, y » center */

    background-position: bottom center; /* x » bottom, y » center */

    background-position: center bottom; /* x » center, y » bottom */

    background-position: center center; /* x » center, y » center */
}

正如上面代码所示，background-position属性值是两个关键词时，关键词出现的顺序无关紧要。比如 left top 和 top left 渲染出来的效果相同。需要注意的是，如果两个值都是同一个方向的关键词，则background-position会被视为无效：

/* 无效声明 */
.element {
    background-position: left right;
    background-position: right left;

    background-position: top bottom;
    background-position: bottom top;
}

background-position显式设置的值是 <length-percentage>（<length>或<percentage>）且另一个值是 left 或 right 时，则该值定义的是 y 轴的位置（x轴位置是由关键词 left 或 right决定）。比如：

.element {
    background-position: left 50px;  /* x » left = 0%, y » 50px */
    background-position: left 25%;   /* x » left = 0%, y » 25% */

    background-position: right 50px; /* x » right = 100%, y » 50px */
    background-position: right 25%;  /* x » right = 100%, y » 25% */
}

background-position显式设置的值是 <length-percentage>，且另一个值是 top 或 bottom 时，则该值定义的是 x 轴的位置（y轴位置由关键词top或bottom决定）。比如：

.element {
    background-position: 50px top;      /* x » 50px, y » top = 0% */
    background-position: 25% top;       /* x » 25%, y » top = 0% */

    background-position: 50px bottom;   /* x » 50px, y » bottom = 100% */
    background-position: 25% bottom;    /* x » 25%, y » bottom = 100% */
}

需要注意的是，当background-position的值是 <length-percentage> 和关键词 top、right、bottom 和 left 组合在一起时（<length-percentage>与关键词配对时），两者的顺序很重要，定义x轴的值要放前面，定义y轴的值要放后面。即：

.element {
    background-position: left <length-percentage>;
    background-position: right <length-percentage>;

    background-position: <length-percentage> top;
    background-position: <length-percentage> bottom;
}

要是不按上面规则给background-position设置值，那么浏览器将会视其无效，比如，下面这样的声明就是无效规则：

.element {
    background-position: top <length-percentage>;
    background-position: bottom <length-percentage>;

    background-position: <length-percentage> left;
    background-position: <length-percentage> right;
}

即 left 20px 和 20px left是不相同的，其中 background-position: 20px left声明无效（无效时，background-position将会取其初始值left top，即 0% 0%）。

不过，<length-percentage> 和关键词 center 组合在一起使用时，该值要是在 center 之后，则该值定义的是 y轴的位置（x轴是关键词center，相当于 50%），反之该值定义的是x轴的位置（y轴是关键词center，相当于 50%）：

.element {
    background-position: center 50px;   /* x » center = 50%, y » 50px */
    background-position: center 25%;    /* x » center = 50%, y » 25% */

    background-position: 50px center;   /* x » 50px, y » center = 50% */
    background-position: 25% center;    /* x » 25%, y » center = 50% */
}

三个值

对于大多数开发者而言，在使用 background-position 属性来给背景图片定位时，常使用的方式就是一个值或两个值。对于使用三个值（或后面要介绍的四个值）还是很新鲜的。显式给background-position使用三个值与前面介绍的还是有很大的区别。

首先要说的是，background-position 同时使用三个关键词时，也会被浏览器视为无效的CSS声明，比如：

/* 无效样式规则 */
.element {
    background-position: left top center;
}