ckground-position
指定背景图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来说的。
/* 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;
初始值 |
0% 0% |
---|---|
适用元素 |
all elements. It also applies to ::first-letter and ::first-line. |
是否是继承属性 |
no |
Percentages |
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 |
适用媒体 |
visual |
计算值 |
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 |
repeatable list of simple list of length, percentage, or calc |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
background-position属性被指定为一个或多个<position>值,用逗号分隔。
值
<position>
是一个<position>
,一到四个距元素边界2D位置的数值。可以给出相对值或绝对值。注意位置可以设置在盒模型外。
1值语法:值可能是:
- 关键字值
center
,它是图像的中心。
- 关键字值中的一个
top
,left
,bottom
,right
。这指定了放置物品的边缘。另一个尺寸被设置为50%,因此该项目被放置在指定边缘的中间。
- a
<length>
或<percentage>
。这指定相对于左边缘的X坐标,Y坐标设置为50%。
2值语法:一个值定义X,另一个定义Y.每个值可以是:
- 关键字值中的一个
top
,left
,bottom
,right
。如果left
或者right
在这里给出,那么这个定义了X,而另一个给定的值定义了Y.如果top
或者bottom
给定了,那么这个定义了Y而另一个定义了X.
-
<length>
或<percentage>
。如果另一个值是left
orright
,那么这个值定义Y,相对于上边缘。如果另一个值是top
orbottom
,那么这个值定义X,相对于左边缘。如果两个值是<length>
或<percentage>
值,那么第一个定义X和第二个Y.
请注意:
- 如果一个值是
top
或bottom
,那么另一个值可能不是top
或bottom
。
- 如果一个值是
left
或right
,那么另一个值可能不是left
或right
。
这意味着“ top top"
和left right
”是无效的。
正式语法
<position>#where <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>
示例
这三个示例中的每一个都使用CSS background
创建一个包含星形图像的黄色矩形元素。在每个例子中,星形图像处于不同的位置。另外,第三个例子说明了如何为一个元素中的两个不同的背景图像指定位置。
HTML
<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("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 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("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, center; }
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'background-position' in that specification. |
Candidate Recommendation |
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. |
Recommendation |
Allows for keyword values and <length> and <percentage> values to be mixed. |
CSS Level 1The definition of 'background-position' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic Support |
1.0 |
12 |
1.0 |
4 |
3.5 |
1.0 |
Multiple backgrounds |
1.0 |
12 |
3.6 |
9.0 |
10.5 |
1.3 |
Four-value syntax (support for offsets from any edge) |
25.0 |
12 |
13.0 |
9.0 |
10.5 |
7.0 |
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Multiple backgrounds |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Four-value syntax (support for offsets from any edge) |
(Yes) |
(Yes) |
(Yes) |
13.0 |
(Yes) |
(Yes) |
(Yes) |