CSS background-position详解

发布时间：2023-05-19

一、background-position 概述

CSS background-position 可以用来设置页面元素（如：div、img 等）背景图像（background-image）的位置，其基本语法如下：

background-position: [left|center|right] [top|center|bottom];

其中，left|center|right 用于设置水平方向位置，top|center|bottom 用于设置垂直方向位置。 如果只设置一个值，则该值为水平方向位置，垂直方向的位置默认为 center。 使用 background-position 指定背景位置时，水平方向的值决定了背景图像在背景容器内水平位置的起点，垂直方向的值决定了背景图像在背景容器内垂直位置的起点。

二、background-position 单位

CSS background-position 的位置单位可以使用绝对单位（如：px、em 等）或相对单位（如：百分比%）。 当使用百分比时，水平方向的值为背景图像的水平宽度在容器内的位置，垂直方向的值为背景图像的垂直高度在容器内的位置。

三、background-position 关键字

CSS background-position 支持三个关键字：left、center、right、top、bottom。 当省略某个位置时，默认值为 center。可以通过使用两个关键字组合，指定背景图像在水平和垂直方向的位置。

background-position: left top;
background-position: right bottom;
background-position: center center;

四、background-position 多背景图像

CSS3 中，background-position 还可以用于设置多背景图的位置。当使用多背景图时，需要指定每一个背景图的位置，依次为：

  1. 图片URL
  2. 定位信息
  3. 是否重复
    每个图片的定位信息都由两个数值表示，用逗号分隔，分别用于设置水平方向和垂直方向的位置，如：
.container {
  background-image: url(image1.png), url(image2.png);
  background-position: 10px 10px, 20px 20px;
  background-repeat: no-repeat;
}

五、background-position 使用技巧

使用 background-position 可以轻松实现以下效果：

  1. 图像水平居中或垂直居中
  2. 图像位置微调，使元素更加美观
  3. 定位多背景图像

六、示例代码

.container {
  background-image: url('background.png');
  background-position: center center;
  background-repeat: no-repeat;
}

以上代码将容器的背景图像设置为 background.png，并将其位置设置为居中。

.container {
  background-image: url('background.png');
  background-position: 20px 10px;
  background-repeat: no-repeat;
}

以上代码将容器的背景图像设置为 background.png，并将其位置微调为距离容器左侧 20px，距离容器顶部 10px。

.container {
  background-image: url('background1.png'), url('background2.png');
  background-position: left top, right bottom;
  background-repeat: no-repeat;
}

以上代码设置了两个背景图像：background1.png 和 background2.png，一个定位在页面左上角，另一个定位在页面右下角。

推荐文章