共用方式為

background-position

  • 發行項
important note重要訊息：

本文件為初步資訊而且可能隨時變更。

設定物件背景的位置。

語法

{ background-position: sPosition}

可能的值

sPosition

指定下列任一或兩個值的字串：

length

浮點數，後面接著絕對單位指示項 ( cm 、 mm 、 in 、 pt 或 pc ) 或相對單位指示項 ( em 、 ex 或 px )。

percentage

整數，後面接著百分比符號 ( % )。此值為物件寬度或高度的百分比：

  • 垂直對齊值。可能的值包括：

    • top    垂直對齊頂端。

    • center    置中垂直對齊。

    • bottom    垂直對齊底部。

  • 水平對齊值。可能的值包括：

    • left    水平對齊左側。

    • center    置中水平對齊。

    • right    水平對齊右側。

此屬性的預設值為 0% 0% 。這不是繼承屬性。

備註

如果只設定一個值，該值會套用至水平座標，而垂直座標則會設為 50% 。如果設定兩個值，第一個值會套用至水平座標，而第二個值會套用至垂直座標。

將值設為 0% 0% 會把 background-image 放置在元素內容左上角不包括邊框的位置。

指定 right center 有下列效果：由於 right 被視為 X 座標方向，因此 right 會覆寫 center 值，使背景隨著向右偏移。

此屬性可利用 background 複合屬性，連同其他背景屬性一併設定。

範例

下列範例使用 background-position 屬性來指定背景影像的位置。此範例會呼叫內嵌 (全域) 樣式表以移動球體：

<style>
    .style1 {background-position:top center}
    .style2 {background-position:bottom right}
</style>
</head><body onload="ospan.className='style1'">
<span style="font-size:14; width:250;" id="ospan"
      onmouseover="this.className='style2'"
      onmouseout="this.className='style1'">
. . . 
</span> 

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 1 (CSS1) (階層式樣式表 (CSS) 層級 1 (CSS1)) Ee341472.xtlink_newWindow(zh-tw,Expression.40).png 找到此屬性的定義。

適用範圍

A、ADDRESS、B、BIG、BLOCKQUOTE、BODY、BUTTON、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、CUSTOM、DD、DEFAULTS、DFN、DIV、DL、DT、EM、FIELDSET、FORM、HN、HTML、I、IMG、INPUT TYPE=BUTTON、INPUT TYPE=CHECKBOX、INPUT TYPE=FILE、INPUT TYPE=IMAGE、INPUT TYPE=PASSWORD、INPUT TYPE=RADIO、INPUT TYPE=RESET、INPUT TYPE=SUBMIT、INPUT TYPE=TEXT、LI、OL、P、S、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR、XMP

另請參閱

概念

background