<%@LANGUAGE="VBSCRIPT" CODEPAGE="950"%> 拓米數位CSS串接樣式表教學文件
文件標題:[D003]背景樣式之三background-position背景圖片的開始顯示位置

內容說明:

1、背景樣式 background-position
A、絕對長度
B、百分比
C、水平方向起始點
D、垂直方向起始點
2、使用度量單位

教學內容:

1、背景樣式 background-position

指定背景圖片用在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

對齊下綠

不重複排列

 

2、使用度量單位

度量單位 意義
px 像素(pixel)
pt 點(point),一點是1/72英吋
pc pica,1pica是1/6英吋
in 英吋
cm 公分
mm 公厘
em 字型的大寫字母M的寬度
ex 字型的小寫字母x的高度
   
   最後修改日期: 2003年10月8日