MDN wants to learn about developers like you:


background-position 指定背景图片的初始位置。

对于每一个被设定的背景图片来说,background-position 这个 CSS 属性设置了一个初始位置。 这个初始位置是相对于以 background-origin 定义的背景位置图层(padding-box|border-box|content-box)来说的。

初始值 0% 0%
适用于  所有元素. 同样适用于 ::first-letter 和::first-line.
百分比 参照尺寸为背景图片定位区域的大小减去背景图片的大小; 第一个值为元素在水平方向上的偏移量,第二个元素为元素在竖直方向上的偏移量
Media visual
Computed value 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
Animation type a repeatable list of , a simple list of , a lengthpercentage or calc();
Canonical order the unique non-ambiguous order defined by the formal grammar
/* 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;




是一个 <position>,一到四个距元素边界2D位置的数值。可以给出相对值或绝对值。注意位置可以设置在盒模型外。


<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
top left 和 left top
等同于 '0% 0%'.
top, top center 和 center top
等同于 '50% 0%'.
right top 和 top right
等同于 '100% 0%'.
left, left center 和 center left
等同于 '0% 50%'.
center 和 center center
等同于 '50% 50%'.
right, right center 和 center right
等同于 '100% 50%'.
bottom left 和 left bottom
等同于 '0% 100%'.
bottom, bottom center 和 center bottom
等同于 '50% 100%'.
bottom right 和 right bottom
等同于 '100% 100%'.

如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,与此同时垂直方向的默认值被设置成50%。在关键词、百分比和数值混合指定的情况下,关键词 left 和 right 只能被指定水平方向的位置(第一个值)同时 top 和 bottom 只能被指定指定为垂直方向的值(第二个值)。同样,负数值是允许指定的。



<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>


使用 CSS background 和多个图片的例子



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

CSS 内容

/* Shared among all DIVS */
div {
    background-color: #FFEE99;
    background-repeat: no-repeat;
    width: 300px;
    height: 80px;
    margin-bottom: 12px;

/* background-position examples */

/* These examples use the background shorthand CSS property */
.exampleone {
    background: url("") #FFEE99 2.5cm bottom no-repeat;
.exampletwo {
    background: url("") #FFEE99 3em 50% no-repeat;

Multiple background images: Each image is matched with the
corresponding position style, from first specified to last.
.examplethree {
    background-image:    url(""), 
    background-position: 0px 0px,



Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Candidate Recommendation Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
CSS Level 2 (Revision 1)
Recommendation Allows for the mix of keyword values and <length> and <percentage> values.
CSS Level 1


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Four-value syntax (support for offsets from any edge) 25 (maybe earlier) 13.0 (13.0) 9.0 10.5 7.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Multiple backgrounds ? 1.0 (1.9.2) ? ? ?
Four-value syntax (support for offsets from any edge) 未实现 13.0 (13.0) ? ? iOS 7.0






 最后编辑者: xgqfrms-GitHub,