5.background-position: 指背景圖片的位置屬性. 屬性值可以有百分比, 位置名稱和具體數(shù)值三種形式, 如下圖所示(藍(lán)色部分表示距離左邊框的數(shù)據(jù), 黑色部分表示距離上邊框的數(shù)據(jù)):
可以看到, 要使背景圖片位于左上角有三種方法, 代碼如下:
background-position: 0% 0%; background-position: top left; background-position: 0 0;
實(shí)際上, 不聲明此屬性, 即默認(rèn)背景圖片為左上角顯示. 值得注意的是, 當(dāng)用屬性值為位置名稱時(shí), 先寫距離上邊框的數(shù)據(jù)(top), 后寫距離左邊框的數(shù)據(jù)(left). 而當(dāng)用百分比或是具體數(shù)值表示時(shí), 則反過來寫.請(qǐng)讀者仔細(xì)看看上圖的藍(lán)色和黑色部分的順序.
不要小看這個(gè)屬性, 在導(dǎo)航條的制作中, 這個(gè)屬性將是實(shí)現(xiàn)一些動(dòng)態(tài)變化的關(guān)鍵手段(將在以后的實(shí)例篇中說明).
Summary: 現(xiàn)在總結(jié)一下background的屬性, 如果想讓某背景圖片表現(xiàn)為固定, 位于右上角, 不重復(fù), 背景顏色為#CCC, 代碼如下:
background-image: url(http://www.95time.cn/articleimg/2008/07/5986/04.jpg); background-color: #CCC; background-attachment: fixed; background-position: top right; background-repeat: no-repeat;
簡(jiǎn)寫為:
background: url(http://www.95time.cn/articleimg/2008/07/5986/04.jpg) #CCC fixed no-repeat top right;
表現(xiàn)如下(請(qǐng)用IE觀看以下演示):
X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
本篇正文完.
原以為可以多寫幾個(gè)屬性的, 沒想到字體和背景兩個(gè)屬性就寫了這么長(zhǎng), 在體力和精神上都已經(jīng)到了極限, 暫寫到這, 其余的還看下回更新.
本文鏈接:http://www.95time.cn/tech/web/2008/5986.asp
出處:Jorux Notebook
責(zé)任編輯:moby
上一頁 css基礎(chǔ)教程屬性篇之二 [3] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|