CSS-背景圖檔位置 | background-position

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

  or 

  right

  ，那麼這個值定義Y，相對于上邊緣。如果另一個值是

  top

  bottom

  ，那麼這個值定義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.		Initial definition.

糾錯

浏覽器相容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	1.0	12		4	3.5
Multiple backgrounds			3.6	9.0	10.5	1.3
Four-value syntax (support for offsets from any edge)	25.0		13.0			7.0

	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
	(Yes)