background-position

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* 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: unset;

background-position property is specified as one or more <position> values, separated by commas.

值

<position>


<position>

. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be


center

. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).

1-value syntax: the value may be:

The keyword value center , which centers the image.
One of the keyword values top , left , bottom , right . This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
A <length> or <percentage> . This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

2-value syntax: one value defines X and the other defines Y. Each value may be:

One of the keyword values top , left , bottom , right 。若 left or right are given here, then this defines X and the other given value defines Y. If top or bottom are given, then this defines Y and the other value defines X.
A <length> or <percentage> . If the other value is left or right , then this value defines Y, relative to the top edge. If the other value is top or bottom , then this value defines X, relative to the left edge. If both values are <length> or <percentage> values, then the first defines X and the second Y.
Note that: If one value is top or bottom , then the other value may not be top or bottom . If one value is left or right , then the other value may not be left or right . This means, e.g., that top top and left right are not valid.
默认值为 top left or 0% 0% .

3-value syntax: Two values are keyword values, and the third is the offset for the preceding value:

The first value is one of the keyword values top , left , bottom , right ，或 center 。若 left or right are given here, then this defines X. If top or bottom are given, then this defines Y and the other keyword value defines X.
<length> or <percentage> value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.
The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two <length> or <percentage> values is not valid.

4-value syntax: The first and third values are keyword value defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:

The first value and third values one of the keyword values top , left , bottom , right 。若 left or right are given here, then this defines X. If top or bottom are given, then this defines Y and the other keyword value defines X.
The second and fourth values are <length> or <percentage> values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.

Regarding Percentages:

The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the right (或 bottom ) edge of the background image is aligned with the right (或 bottom ) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly,


background-position: 25% 75%

means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.

Essentially what happens is the background image dimension is subtracted from the corresponding container dimension, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge.

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

Using the X axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is 100px wide, with background-size set to auto:

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

So that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values:

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

So with these resultant values for our example, the left edge of the image is offset from the left edge of the container by:

+ 50px (putting the left image edge in the center of the 100-pixel-wide container)
0px (left image edge coincident with the left container edge)
-100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the container)
-200px (left image edge 200px to the left of the container, in this example that means the right image edge is coincident with the right container edge)
-250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container)

It's worth mentioning that if your background-size is equal to the container size for a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero. You will need to offset using absolute values.

形式定义

初始值	`0% 0%`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	no
百分比	refer 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
计算值	a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a `<length>` ), otherwise as a percentage
动画类型	repeatable list of simple list of length, percentage, or calc

形式句法

<bg-position>#where 
<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>? ] ]
where 
<length-percentage> = <length> | <percentage>

范例

定位背景图像

Each of these three examples uses the background property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.

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("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/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("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       right 3em bottom 2em;
}

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'background-position' in that specification.	候选推荐	Adds support for multiple backgrounds and the four-value syntax. Modifies the percentage definition to match implementations.
CSS Level 2 (Revision 1) The definition of 'background-position' in that specification.	推荐	Allows for keyword values and `<length>` and `<percentage>` values to be mixed.
CSS Level 1 The definition of 'background-position' in that specification.	推荐	初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`background-position`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
Multiple backgrounds	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 3.6	IE 完整支持 9	Opera 完整支持 10.5	Safari 完整支持 1.3	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
Four-value syntax (support for offsets from any edge)	Chrome 完整支持 25	Edge 完整支持 12	Firefox 完整支持 13	IE 完整支持 9	Opera 完整支持 10.5	Safari 完整支持 7	WebView Android 完整支持 ≤37	Chrome Android 完整支持 25	Firefox Android 完整支持 14	Opera Android 完整支持 14	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 1.5

图例

完整支持

Quantum CSS notes

Gecko has a bug meaning that background-position can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (见 bug 1390446 ). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo , planned for release in Firefox 57) fixes this.

另请参阅

元数据

最后修改： Sep 23, 2020

在此页

句法

值