background-position

語法:

background-position<position> [ , <position> ]*

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

預設值0% 0%,效果等同於left top

適用於:所有元素

繼承性:無

動畫性:是

計算值:指定值

媒 體:視覺

取值:

<percentage>
用百分比指定背景圖片在元素中出現的位置。可以為負值。參考容器尺寸減去背景圖尺寸進行換算。
<length>
用長度值指定背景圖片在元素中出現的位置。可以為負值。
center:
背景圖片橫向或縱向居中。
left:
背景圖片從元素左邊開始出現。
right:
背景圖片從元素右邊開始出現。
top:
背景圖片從元素頂部開始出現。
bottom:
背景圖片從元素底部開始出現。

說明:

指定背景圖片在元素中出現的位置。
  • 該屬性接受1~4個參數值。
  • 如果提供三或四個,每個 <percentage><length> 偏移量之前都必須跟著一個邊界關鍵字(即left | right | top | bottom,不包括center),偏移量相對關鍵字位置進行偏移。

    示例:假設要定義背景圖片在容器中右下方,並且距離右邊和底部各有20px

    縮寫方式:

    background: url(test1.jpg) no-repeat right 20px bottom 20px;
    你也可以設定3個參數值:

    拆分方式:

    background: url(test1.jpg) no-repeat left bottom 10px;

    要注意的是:設定3個或4個值,偏移量前必須有邊界關鍵字。也就是說,形如:10px bottom 20px,這樣的參數設定是錯誤的,因為10px前面沒有關鍵字。

  • 如果提供兩個,第一個用於橫坐標,第二個用於縱坐標。
  • 如果只提供一個,該值將用於橫坐標;縱坐標將預設為50%(即center)。
  • 對應的腳本特性為:backgroundPosition

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
  • 灰色 = 未知
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
3~4個參數
Multiple background position
8.0
9.0+

示例: