(1). background-color:
1): background-color屬性用來為元素設(shè)置背景顏色。
2):需要指定一個顏色值,當(dāng)指定了一個顏色以后,整個元素的可見區(qū)域都會使用這個顏色作為背景色。
3):如果不設(shè)置背景顏色,元素默認(rèn)背景顏色2為透明,實際上會顯示父元素的背景顏色。
(2). background-image:
1):background-image可以為元素指定背景圖片。
2):和background-color類似,這不過這里使用的是一個圖片作為背景。
3):需要一個url地址作為參數(shù),url地址需要指向一個外部圖片的路徑。
例如:
background-image: url(1.jpg)
(3). background-repeat:
1):background-repeat用于控制背景圖片的重負(fù)方式。
2):如果只設(shè)置背景圖片默認(rèn)背景圖片將會使用平鋪的方式,可以通過該屬性進行修改。
3):可選值:
— repeat:默認(rèn)值,圖片左右上下平鋪。
— no-repeat:只顯示圖片一次,不會平鋪。
— repeat-x:沿x軸水平平鋪一張圖片。
— repeat-y:沿y軸水平平鋪一張圖片。
(4):background-position:
1):background-position用來精確控制背景圖片在元素中的位置。
2):可以通過三種方式來確定圖片在水平方向和垂直方向的起點。
— 關(guān)鍵字:top right bottom left center
— 百分比
— 數(shù)值
(5):background-attachment:
1):background-attachment用來設(shè)置背景圖片是否隨頁面滾動。
2):可選值:
— scroll:隨頁面滾動。
— fixed:不隨頁面滾動。
(6):background:
background是背景的簡寫屬性,通過這個屬性可以一次性設(shè)置多個樣式,而且樣式的順序沒有要求。
例如:
background: green url(1.jpg) no-repeat center centerfixed;
(7). CSS Sprite:
1):CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式。
2):通過這種方式我們可以將網(wǎng)頁中的零星圖片集中放到一張大圖上。
3):這樣一來,一次請求便可以同時加載多張圖片,大大提高了圖片的加載效率。