background-position

background-position属性用于设置背景图像的起始位置。它接受两个值，分别表示水平位置和垂直位置。

水平位置的取值可以是具体的像素值（如50px），也可以是相对于容器宽度的百分比值（如50%）。如果只指定一个水平位置的值，则垂直位置默认为center。垂直位置的取值同样可以是具体的像素值或百分比值，如果只指定一个垂直位置的值，则水平位置默认为center。

背景图像的起始位置是相对于容器的左上角来计算的，如果水平位置为0%并且垂直位置为*，则图像将位于容器的左下角。

可以使用background-position属性为多个背景图像指定不同的起始位置，多个值之间使用逗号分隔。例如：

.example {

background-image: url(image1.png)

url(image2.png);

background-position: top left

center bottom;

}

在上面的示例中，*个背景图像的起始位置是左上角，第二个背景图像的起始位置则是水平居中并且位于容器的底部。

如果只指定一个值，则该值将应用于所有背景图像。如果指定的值不足两个，缺少的值将默认为center。

background-position属性也支持关键字值来指定起始位置。常用的关键字值包括top、bottom、left、right和center。例如：

.example {

background-position: top right;

}

上面的示例将背景图像的起始位置设置为容器的右上角。

除了使用单个值或关键字值，background-position属性还支持将水平和垂直位置的取值组合在一起。可以使用关键字值或像素值来分别指定水平位置和垂直位置。例如：

.example {

background-position: right 20px bottom 30px;

}

在上面的示例中，背景图像的水平位置为容器的右侧20像素，垂直位置为容器底部30像素。

总结起来，background-position属性用于设置背景图像的起始位置，可以使用具体的像素值、相对于容器宽度的百分比值、关键字值或组合值来指定水平和垂直位置。

这是background-position属性的基本用法，希望对你有所帮助。