background-position

background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

尝试一下

语法

css
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position:
  0 0,
  center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: unset;

background-position 属性被指定为一个或多个 <position> 值,用逗号隔开。

<position>

一个 <position> 定义一组 x/y 坐标(相对于一个元素盒子模型的边界),来放置项目(原文为 item)。它可以使用一到四个值进行定义。如果使用两个非关键字值,第一个值表示水平位置,第二个值表示垂直位置。如果仅指定一个值,则第二个值默认是 center。如果使用三个或四个值,则长度百分比值是前面关键字值的偏移量。

一个值的语法: 值可能是:

  • 关键字 center,用来居中背景图片。
  • 关键字 topleftbottomright 中的一个。用来指定把这个项目(原文为 item)放在哪一个边界。另一个维度被设置成 50%,所以这个项目(原文为 item)被放在指定边界的中间位置。
  • <length><percentage>。指定相对于左边界的 x 坐标,y 坐标被设置成 50%。

两个值的语法: 一个定义 x 坐标,另一个定义 y 坐标。每个值可以是:

  • 关键字 topleftbottomright 中的一个。如果这里给出 leftright,那么这个值定义 x 轴位置,另一个值定义 y 轴位置。如果这里给出 topbottom,那么这个值定义 y 轴位置,另一个值定义 x 轴位置。
  • <length><percentage>。如果另一个值是 leftright,则该值定义相对于顶部边界的 Y。如果另一个值是 topbottom,则该值定义相对于左边界的 X。如果两个值都是 <length><percentage> 值,则第一个定义 X,第二个定义 Y。
  • 注意:如果一个值是 topbottom,那么另一个值不可能是 topbottom。如果一个值是 leftright,那么另一个值不可能是 leftright。也就是说,例如,top topleft right 是无效的。
  • 排序:配对关键字时,位置并不重要,因为浏览器可以重新排序,写成 top leftleft top 其产生的效果是相同的。使用 <length><percentage> 与关键字配对时顺序非常重要,定义 X 的值放在前面,然后是定义 Y 的值, right 20px20px right 的效果是不相同的,前者有效但后者无效。left 20%20% bottom 是有效的,因为 X 和 Y 值已明确定义且位置正确。
  • 默认值是 left top 或者 0% 0%

三个值的语法: 两个值是关键字值,第三个是前面值的偏移量:

  • 第一个值是关键字 topleftbottomright,或者 center。如果设置为 leftright,则定义了 X。如果设置为 topbottom,则定义了 Y,另一个关键字值定义了 X。
  • <length><percentage>,如果是第二个值,则是第一个值的偏移量。如果是第三个值,则是第二个值的偏移量。
  • 单个长度或百分比值是其前面的关键字值的偏移量。一个关键字与两个 <length><percentage> 值的组合无效。

四个值的语法: 第一个和第三个值是定义 X 和 Y 的关键字值。第二个和第四个值是前面 X 和 Y 关键字值的偏移量:

  • 第一个值和第三个值是关键字值 topleftbottomright 之一。如果设置为 leftright,则定义了 X。如果设置为 topbottom,则定义了 Y,另一个关键字值定义了 X。
  • 第二个和第四个值是 <length><percentage>。第二个值是第一个关键字的偏移量。第四个值是第二个关键字的偏移量。

关于百分比:

给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左(或上)边界与容器的相应左(或上)边界对齐,或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的 (或 )边界与容器的 (或 )边界对齐,或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像,因为图像的 50% 将位于容器的 50% 标记处。类似的,background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。

基本上发生的情况是从相应的容器尺寸中减去背景图像尺寸,然后将结果值的百分比用作从左(或顶部)边界的直接偏移量。

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

以 X 轴为例,假设我们有一个 300px 宽的图像,我们在一个 100px 宽的容器中使用它,background-size 设置为 auto

100px - 300px = -200px (container & image difference)

因此,位置百分比为 -25%、0%、50%、100%、125%,我们得到这些图像到容器边界偏移值:

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

因此,对于我们的示例,使用这些结果值,让图像左边界容器左边界偏移:

  • + 50px(将图像左边界放在 100px 宽容器的中心)
  • 0px(图像左边界与容器左边界重合)
  • -100px (将图片相对容器左移 100px,这意味着图片中部的 100px 内容将出现在容器中)
  • -200px (将图片相对容器左移 200px,这意味着图片右部分的 100px 内容将出现在容器中)
  • -250px (将图片相对容器左移 250px,这意味着图片的右边界对齐容器的中线)

值得一提的是,如果你的 background-size 等于给定轴的容器大小,那么该轴的 百分比 位置将不起作用,因为“容器图像差异”将为零。你将需要使用绝对值进行偏移。

形式定义

初始值0% 0%
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
计算值该简写所对应的每个属性:
  • background-position-x: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
  • background-position-y: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
动画类型a repeatable list

形式语法

background-position = 
<bg-position>#

<bg-position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<length-percentage> =
<length> |
<percentage>

示例

定位背景图像

下面三个例子每一个都使用 background 来创建一个包含一个星星的黄色长方形元素。每个例子中,星星的位置是不一样的。第三个例子阐明了如何为两个不同的背景图片指定位置。

HTML

html
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS

css
/* 被所有 div 共享 */
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* 这些例子使用 `background` 缩写 */
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/* 多背景图片:每个图片依次和相应的 `background-position` 匹配 */
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}

效果

规范

Specification
CSS Backgrounds and Borders Module Level 3
# background-position

浏览器兼容性

BCD tables only load in the browser

参阅