CSS中背景background-position负值定位深入理解[图文]

什么是background-position？

background-position属性用于指定背景图像的起始位置（也就是背景图像在容器中的位置）。在未指定background-position属性时，背景图像的起始位置默认为左上角。

background-position属性可以使用关键字或百分比值指定位置，也可以使用像素值和单位值指定位置，如下所示：

background-position: left top; /*左上角*/
background-position: center center; /*中间*/
background-position: right bottom; /*右下角*/
background-position: 50% 50%; /*以容器中心为起点*/
background-position: -10px -10px; /*向左上偏移10像素*/

什么是负值定位？

当我们使用像素值或单位值指定background-position属性时，可以使用负值定位将背景图像定位于容器的左上角之外，达到无缝拼接多张背景图像的效果。

通过下面一个示例来深入理解负值定位：

.site-header {
  background-image: url("header-bg.jpg"), url("header-bg-2.jpg");
  background-repeat: no-repeat;
  background-position: 0 0, -1000px 0;
}

上述代码中，我们在.site-header选择器中设置了两张背景图片，使用,进行分隔。第一张图片默认的background-position为0 0，即在容器的左上角。而第二张图片的background-position设置为-1000px 0，水平方向向左偏移1000像素，垂直方向保持在容器的顶部，即水平方向与容器左侧对齐的位置。

这时，第二张图片只有右半部分会显示在容器内部，而左半部分则超出容器的左侧。这样，只需要将第一张图片中的右半部分与第二张图片的左半部分进行无缝拼接，即可实现跨容器无缝拼接多张背景图片的效果。

同样，我们也可以使用负值定位实现竖直方向上的无缝拼接，如下所示：

.site-header {
  background-image: url("header-bg.jpg"), url("header-bg-2.jpg");
  background-repeat: no-repeat;
  background-position: 0 0, 0 -1000px;
}

上述代码中，我们使用0 -1000px将第二张图片向上偏移1000像素，水平方向保持与容器左侧对齐的位置。这时，第二张图片只有下半部分会显示在容器内部，而上半部分则超出容器的顶部。和之前一样，只需要将第一张图片中的下半部分与第二张图片的上半部分进行无缝拼接，就可以实现跨容器无缝拼接多张背景图片的效果。

总结

通过使用负值定位，我们可以在CSS中实现无缝拼接多张背景图片的效果，为网站设计提供更多的灵活性和美观性。