移动 CSS 背景图片 - CSS

在 CSS 中，我们可以使用 background-position 属性来移动背景图片。

语法

background-position: x-axis y-axis;

其中，x-axis 和 y-axis 分别表示背景图片的横向和纵向位置。可以使用以下单位：

• px：像素。
• %：百分比。
• left：表示背景图片的左边缘与容器的左边缘对齐。
• center：表示背景图片的中心与容器的中心对齐。
• right：表示背景图片的右边缘与容器的右边缘对齐。
• top：表示背景图片的上边缘与容器的上边缘对齐。
• bottom：表示背景图片的下边缘与容器的下边缘对齐。

示例

以下是一些示例：

将背景图片移动到容器的右上角

background-position: right top;

将背景图片移动到容器的正中心

background-position: center center;

将背景图片向左移动 20 像素，向下移动 10 像素

background-position: -20px 10px;

注意事项

• 如果只指定一个值，则默认为水平方向为 center，垂直方向为 top。
• 如果使用百分比单位，则表示相对于容器的大小。
• 如果使用负值，则表示将背景图片向相反方向移动。
• background-position 的默认值为 0% 0%，即背景图片的左上角与容器的左上角对齐。