1. Web
  2. CSS
  3. background-position

background-position

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

试一试

background-position: top;

background-position: left;

background-position: center;

background-position: 25% 75%;

background-position: bottom 50px right 100px;

background-position: right 35% bottom 45%;

<section class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-color: navajowhite;
  background-image: url("/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  height: 100%;
}

语法

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

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

值

<position>

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

单值语法：该值可以是

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

双值语法：一个值定义 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%。

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

  • 第一个值是关键字 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 在某个轴上等于容器的大小，那么该轴的百分比位置将没有效果，因为“容器-图片尺寸差”将为零。你需要使用绝对值进行偏移。

正式定义

初始值0% 0%
应用于所有元素。也适用于 ::first-letter 和 ::first-line。
继承性否
百分比指的是背景定位区域的大小减去背景图片的大小；对于水平偏移，“大小”指宽度，对于垂直偏移，则指高度
计算值作为简写中的每个属性
  • background-position-x：一个列表，每个项目由一个绝对长度和百分比的组合给出的偏移量，外加一个原点关键字组成
  • background-position-y：一个列表，每个项目由一个绝对长度和百分比的组合给出的偏移量，外加一个原点关键字组成
动画类型一个可重复的列表

正式语法

background-position = 
  <bg-position>#  

<bg-position> = 
  <position>        |
  <position-three>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

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

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

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

示例

定位背景图片

这三个示例都使用 background 属性创建了一个包含星形图片的黄色矩形元素。在每个示例中，星形处于不同的位置。第三个示例说明了如何在一个元素内为两个不同的背景图片指定位置。

HTML

html
<div class="example-one">Example One</div>
<div class="example-two">Example Two</div>
<div class="example-three">Example Three</div>

CSS

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 */
.example-one {
  background: url("star-transparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.example-two {
  background: url("star-transparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

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

结果

规范

规范
CSS Backgrounds and Borders Module Level 3
# background-position

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们贡献。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.