CSS属性：background-position

background-position 是CSS中用于设置背景图片初始位置的属性。这个位置是相对于由background-origin定义的位置图层的。通过这个属性，可以精确控制背景图像在元素中的位置，无论是水平还是垂直方向。

使用background-position

background-position属性可以接受多种类型的值，包括关键字、百分比或长度值。这些值定义了背景图像相对于元素盒子模型边界的x/y坐标。例如：

css 复制代码

/* 关键字值 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* 百分比值 */
background-position: 25% 75%;
/* 长度值 */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* 多个背景图像 */
background-position: 0 0, center;
/* 边缘偏移值 */
background-position: bottom 10px right 20px;

语法和值

单个值 ：如果只指定了一个值，第二个值默认是center。
两个值 ：第一个值通常是水平位置，第二个值是垂直位置。如果两个值都是关键字，比如top left，它们的顺序不重要，因为浏览器会重新排序。
三个值：两个关键字值和一个偏移量，其中偏移量是前面关键字值的偏移。
四个值：两个定义X和Y的关键字值，以及两个偏移量。

百分比值的计算

百分比值是相对于容器的大小减去背景图像大小的。例如，background-position: 25% 75% 表示图像上的左侧25%和顶部75%的位置将放置在距容器左侧25%和距容器顶部75%的容器位置。

示例

css 复制代码

/* 使用 `background` 缩写 */
exampleone {
 background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
exampletwo {
 background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}
/* 多背景图片：每个图片依次和相应的 `background-position` 匹配 */
examplethree {
 background-image: url("startransparent.gif"), url("catfront.png");
 background-position: 0px 0px, right 3em bottom 2em;
}

在上述示例中， .exampleone 和 .exampletwo 使用了background 缩写来设置背景图像及其位置，而 .examplethree则演示了如何为两个不同的背景图片指定位置。

浏览器兼容性

background-position属性在所有现代浏览器中都得到了支持，包括Chrome、Firefox、Safari、Opera等。对于旧版本的IE，可能需要额外的兼容性考虑。

通过使用background-position属性，开发者可以灵活地控制背景图像的显示方式，无论是固定在某个位置，还是相对于元素的边缘进行偏移。这为页面设计提供了更多的创意空间和视觉效果的可能性。