DIV CSS BackGround屬性研究

在設定background-image屬性時，有很多屬性

1、background:url("圖片路徑") [no-repeat];

background:url("../images/images/up.jpg") no-repeat; 表示不重複顯示圖片

2、background-position

版本：CSS1 相容性：IE6 7+ FF+ 繼承性：無
文法：
background-position :length || length
background-position :position || position
取值： position : top | center | bottom | left | center | right

說明：
設定或檢索對象的背景映像位置。必須先指定 background-image 屬性。
該屬性定位不受對象的補丁屬性( padding )設定影響。
預設值為： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容地區的左上方。
如果只指定了一個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。
如果設定值為 right center ，因為 right 作為橫座標值將會覆蓋 center 值，所以背景圖片將被居右定位。
對應的指令碼特性為 backgroundPosition 。

樣本：
div { background: url(\"images/aardvark.gif\"); background-position: 35% 80%; }
menu { background: url(\"images/aardvark.gif\"); background-position: 35% 2.5cm; }
a { background: url(\"images/aardvark.gif\"); background-position: 3.25in; }
body { background: url(\"images/aardvark.gif\"); background-position: top 0px right 0px; }
其實background-position就是用來控制background-image的position
如果指定一個值，該值用於橫座標，縱座標採用預設，即50%（center）
如果指定兩個值，第二個值用於縱座標，
例如你寫定:background-position: left center;其實和background-position: left;是一樣的都是靠左對齊，垂直置中對齊
如果指定：background-position: left left;就是靠左對齊，垂直置中對齊
如果指定：background-position: right right;就是靠右對齊，垂直置中對齊
如果指定：background-position: left right;其實這兩個值都是在橫座標上的作用，right會覆蓋left屬性，所以最後顯示的還是就是靠右對齊，垂直置中對齊。
除了left center right 還有TOP bottom，這兩個分別是頂部對齊，底部對齊.
例如指定：background-position: left top;那麼圖片將位於左上方。
利用這個特性可以實現一個非常酷的效果
根據以上執行個體還可以如下寫法，相容性也比較好
.test {background: url(title_bg2.jpg) no-repeat -203px 0px; width:200px; height:36px;}
.title {background: url(title_bg.jpg) no-repeat left 0px; width:83px; height:36px;}

 

3、background-attachment

取值： fixed | scroll | inherit

fixed  就是背景圖片固定  不會隨著頁面滾動而變化，IE、Firefox 效果不同 Firefox有效果，IE6不起效果*/

4、background-repeat

版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

文法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數：
repeat : 　背景映像在縱向和橫向上平鋪
no-repeat : 　背景映像不平鋪
repeat-x : 　背景映像在橫向上平鋪
repeat-y : 　背景映像在縱向平鋪
說明：
設定或檢索對象的背景映像是否及如何鋪排。必須先指定對象的背景映像。
對應的指令碼特性為backgroundRepeat。請參閱我編寫的其他書目。
樣本：
menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }