技术问答background-position详解 - 扬州沐宇科技

background-position属性用于设置背景图片的起始位置。

语法： background-position: x y;

属性值：

x：水平方向的起始位置。可以使用具体的像素值（如10px），也可以使用百分比值（如50%）。默认值为50%。
y：垂直方向的起始位置。可以使用具体的像素值（如10px），也可以使用百分比值（如50%）。默认值为50%。

如果只指定一个值，则该值将应用于水平和垂直方向的起始位置。

示例： background-position: 0 0; // 将背景图片的起始位置设置为左上角 background-position: center; // 将背景图片的起始位置设置为居中 background-position: right bottom; // 将背景图片的起始位置设置为右下角 background-position: 20% 40%; // 将背景图片的起始位置设置为水平方向上的20%，垂直方向上的40%

可以使用负值来设置背景图片相对于容器的偏移。

示例： background-position: -10px -20px; // 将背景图片的起始位置向左上方偏移10像素和20像素

注意：如果背景图片的宽度或高度小于容器的宽度或高度，则背景图片将被拉伸以填满整个容器。在这种情况下，起始位置的设置可能不会产生预期的效果。