background-position 是一个 CSS 属性,用于设置元素背景图像的起始位置。通过这个属性,你可以精确控制背景图像在元素内的位置。background-position 可以接受一个或两个值,表示水平和垂直方向上的位置。

语法如下:
.element {
  background-position: x-position y-position;
}

其中,x-position 和 y-position 可以使用长度值、百分比值、关键字(如 top、bottom、left、right、center)等。

示例:
.element {
  background-image: url('background-image.jpg');
  background-position: center top;
}

在这个例子中,.element 元素的背景图像使用 background-image 属性指定为 'background-image.jpg',并使用 background-position: center top; 将背景图像放置在元素的水平中央,垂直顶部。

你还可以使用两个值来分别指定水平和垂直方向的位置,例如:
.element {
  background-image: url('background-image.jpg');
  background-position: 50% 25%;
}

这将把背景图像水平居中,垂直方向上偏移 25%。

通过使用 background-position,你可以在元素上灵活地控制背景图像的显示位置。


转载请注明出处:http://www.zyzy.cn/article/detail/4115/CSS