CSS background-position 用法详细图文介绍

什么是 background-position

CSS 的 background-position 属性用于设置元素背景图像的起始位置。

默认情况下，背景图片从元素的左上角开始，然后向下和向右延伸，而 background-position 属性允许您更改该行为，从而影响背景图像占用的空间。

语法

background-position 属性的语法非常简单：

background-position: x-position y-position;

• x-position 属性表示背景图像相对于元素左侧的位置。
• y-position 属性表示背景图像相对于元素顶部的位置。

可以指定以下单位：

• 像素（px）
• 百分比（%）
• 各种关键字（如 top、bottom、left、right 和 center）

如果只指定了一个值，则该值将用作 x-position，y-position 将自动设置为 center。

实例1：居中背景图片

如果要将背景图像居中，可以将 background-position 设置为 center。例如：

.my-element {
  background-image: url('my-background-image.png');
  background-position: center;
}

如果您想让背景图像偏离中心，请将 x-position 和 y-position 属性具体化：

.my-element {
  background-image: url('my-background-image.png');
  background-position: 50% 50%;
}

在这两种情况下，背景图像都将在元素的中心对齐。

实例2：将背景图像偏移

如果要设置背景图片的偏移量，请使用 background-position 的值来控制 x-position 和 y-position 属性的大小。例如：

.my-element {
  background-image: url('my-background-image.png');
  background-position: 20px 50px;
}

在此示例中，背景图像向右移动了 20 像素，并向下移动了 50 像素。