指定背景圖片用在Html元件的開始顯示位置。
A、絕對長度:依度量單位指定開始的水平方向和垂直方向
background-position:水平樣式值 垂直樣式值 (用一空白字元隔開)
範例語法:
style="background-position:1cm 1cm;background-repeat:no-repeat-;"
background="../images/bg.gif"
| 樣式值 |
意義 |
範例 |
| 1cm 1cm |
左上方起
從水平方向一公分
和垂直方向一公分
開始顯示且不重複排列 |
|
B、百分比:依百分比指定開始的水平方向和垂直方向
background-position:水平樣式值 垂直樣式值 (用一空白字元隔開)
範例語法:
style="background-position:50% 30%;background-repeat:no-repeat-;"
background="../images/bg.gif"
| 樣式值 |
意義 |
範例 |
| 50% 30% |
左上方起
從水平方向50%處
和垂直方向30%處
開始顯示且不重複排列 |
|
C、水平方向起始點:有三種靠左對齊、置中對齊、靠右對齊
background-position:樣式值
範例語法:
style="background-position:left;background-repeat:no-repeat-;" background="../images/bg.gif"
| 樣式值 |
意義 |
範例 |
| left |
靠左對齊
不重複排列 |
|
| center |
置中對齊
不重複排列 |
|
| right |
靠右對齊
不重複排列 |
|
D、垂直方向起始點:有三種對齊上綠、置中對齊、對齊下綠
background-position:樣式值
範例語法:
style="background-position:left;background-repeat:no-repeat-;" background="../images/bg.gif"
| 樣式值 |
意義 |
範例 |
| top |
對齊上綠
不重複排列 |
|
| center |
置中對齊
不重複排列 |
|
| bottom |
對齊下綠
不重複排列 |
|
|