您的位置:

CSS background-position详解

一、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,一个定位在页面左上角,另一个定位在页面右下角。