CSS--background

它的組合寫法：

background-color, background-image, background-repeat,backgroundattachment, background-position。

　　示例寫法：body {background:#000 url(../images/圖片路徑) no-repeat fixed 5px 10px;}

background:5個子屬性
    第一個是顏色，沒得說。
    第二個是圖片，後面的子屬性都是對此子屬性的約束
    第三個是repaeat 重複
    第四個是attachment  固定
    第五個是position 位置

    沒有圖片的狀況就不說了，看一下有圖片的狀況。
子屬性repeat.

        div#bg
        {
            width:400px;
            height:400px;
            border:RED solid 2px;
            /*背景*/
            background: URL("small.jpg") ;
        }

View Code

 看看效果圖：

在上面的CSS代碼中根本沒有對重複進行設置，結果有了水平方向和豎直方向的重複現象 ，說明子屬性background-repeat的默認值是repeat-both.下面是設置repeat-x的效果和repeat-y的效果：

子屬性position.

 　　使用方法是設置左邊距離和頂部距離，都是相對於元素的邊框的。下面是設置background: URL("small.jpg") no-repeat  23px 23px;的效果：

看到背景圖片的位置不在最左上角了，默認是在最左上角的。

子屬性attachment。

　　這個頗有效果感，作出的效果非常個性。一個例子是ebey。background: URL("small.jpg")   fixed ;

　　

　　好像是這麼個狀況：設置div的background的fixed子屬性後，div變成了一個罩子，它到哪裏，背景就顯示到哪裏，背景在整個窗口區域都存在的樣子。設想有另外一個DIV也有一個背景圖片，也設置fixed的話，那麼也會有此效果，這或許就是ebey頁面中的效果吧。

attachment對position的影響：

　　設置屬性：background: URL("small.jpg")  no-repeat fixed 34px 34px ;結果是背景圖片看不到了。當把fixed修改成scroll時，圖片又出現了。這是爲何呢？

原來，fixed是指背景圖片的位置相對於瀏覽器客戶區。scroll是指圖片的位置相對於div的內邊框。因此通常設置fixed時通常不要設置no-repeat。

 

JS

　　object.style.backgroundColor