background-position
當背景圖有設定時,此特徵指定背景圖的初始位置。沒有設 background-position 時,背景圖放在元素矩框的左上角。特徵值可設為:
- <percentage>:百分比。可以用兩個百分比表示水平與垂直的起點。也可以只用一個百分比表示水平位置,垂直位置則由系統內定,預設是 50%。可用負值。
- <length>:長度值。可以用兩個長度值表示水平與垂直的起點。也可以只用一個長度表示水平位置,垂直位置則由系統內定,預設是 50%。可用負值。
- top, center, bottom:擇其一,設定垂直位置。left, center, right:擇其一,設定水平位置。缺一項時,預設值是 center。使用此法,背景圖不會超出元素的矩框。
- inherit:繼承父元件特徵。
使用百分比:由下面的範例可看出來。計算出的位置是(父元件的長或寬 減去 子元件的長或寬)乘上百分比。
使用長度
使用 center right
:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
javascript 應用。可以用 style 物件 的特徵 backgroundPosition 作動態變化。此範例使用到 toggleCSS()。