background-position

/* 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: revert-layer;
background-position: unset;

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

<position>

一个 <position>。位置定义一个 x/y 坐标，用于将项目相对于元素框的边缘放置。它可以使用一到四个值来定义。如果使用两个非关键字值，则第一个值表示水平位置，第二个值表示垂直位置。如果只指定一个值，则第二个值假定为 center。如果使用三个或四个值，则长度百分比值是前面关键字值的偏移量。

1 值语法：该值可以是

• 关键字值 center，它将图像居中。
• 关键字值 top、left、bottom 或 right 之一。这指定了一个放置项目的边缘。然后将另一个维度设置为 50%，因此项目放置在指定边缘的中间。
• 一个 <length> 或 <percentage>。这指定了相对于左边缘的 X 坐标，Y 坐标设置为 50%。

2 值语法：一个值定义 X，另一个值定义 Y。每个值可以是

• 关键字值 top、left、bottom 或 right 之一。如果给出 left 或 right，则这定义了 X，另一个给定的值定义了 Y。如果给出 top 或 bottom，则这定义了 Y，另一个值定义了 X。
• 一个 <length> 或 <percentage>。如果另一个值为 left 或 right，则此值定义相对于顶边缘的 Y。如果另一个值为 top 或 bottom，则此值定义相对于左边缘的 X。如果两个值都是 <length> 或 <percentage> 值，则第一个定义 X，第二个定义 Y。
• 请注意：如果一个值为 top 或 bottom，则另一个值不能为 top 或 bottom。如果一个值为 left 或 right，则另一个值不能为 left 或 right。这意味着，例如，top top 和 left right 无效。
• 顺序：当配对关键字时，放置并不重要，因为浏览器可以重新排序它；值 top left 和 left top 将产生相同的结果。当将 <length> 或 <percentage> 与关键字配对时，放置很重要：定义 X 的值应先于 Y，例如，值 right 20px 有效，而 20px right 无效。值 left 20% 和 20% bottom 有效，因为 X 和 Y 值已明确定义，并且放置正确。
• 默认值为 left top 或 0% 0%。

3 值语法：两个值是关键字值，第三个是前面值的偏移量

• 第一个值是关键字值 top、left、bottom、right 或 center 之一。如果此处给出 left 或 right，则这定义了 X。如果给出 top 或 bottom，则这定义了 Y，另一个关键字值定义了 X。
• <length> 或 <percentage> 值，如果它是第二个值，则是第一个值的偏移量。如果它是第三个值，则是第二个值的偏移量。
• 单个长度或百分比值是其前面关键字值的偏移量。一个关键字与两个 <length> 或 <percentage> 值的组合无效。

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

• 第一个和第三个值等于以下关键字值之一：top、left、bottom 或 right。如果第一个值为 left 或 right，则它定义 X，另一个值定义 Y。如果第一个值为 top 或 bottom，则它定义 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（将图像的左边缘放置在 100 像素宽容器的中心）
• 0px（图像的左边缘与容器的左边缘重合）
• -100px（图像的左边缘在容器左侧 100px，在本例中，这意味着中间 100px 的图像区域在容器中居中）
• -200px（图像的左边缘在容器左侧 200px，在本例中，这意味着图像的右边缘与容器的右边缘重合）
• -250px（图像的左边缘在容器左侧 250px，在本例中，这将 300px 宽图像的右边缘放置在容器的中心）

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

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

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

CSS

/* Shared among all <div>s */
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}

结果

• background-position-x
• background-position-y
• 使用多个背景
• transform-origin