2009/01/29

background-position

background-color | background-position | background-repeat
background-position

當背景圖有設定時,此特徵指定背景圖的初始位置。沒有設 background-position 時,背景圖放在元素矩框的左上角。特徵值可設為:

  1. <percentage>:百分比。可以用兩個百分比表示水平與垂直的起點。也可以只用一個百分比表示水平位置,垂直位置則由系統內定,預設是 50%。可用負值。
  2. <length>:長度值。可以用兩個長度值表示水平與垂直的起點。也可以只用一個長度表示水平位置,垂直位置則由系統內定,預設是 50%。可用負值。
  3. top, center, bottom:擇其一,設定垂直位置。left, center, right:擇其一,設定水平位置。缺一項時,預設值是 center。使用此法,背景圖不會超出元素的矩框。
  4. inherit:繼承父元件特徵。

使用百分比:由下面的範例可看出來。計算出的位置是(父元件的長或寬 減去 子元件的長或寬)乘上百分比。

使用長度

使用 center right

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 backgroundPosition 作動態變化。此範例使用到 toggleCSS()