背景顏色：
標簽 #id .class { background-color:red; }
取值類型：顏色單詞求泰、rgb、rgba浊服、十六進制
背景圖片：
標簽 #id .class { background-image:url(xxx.png); }
url的取值：本地圖片攘轩、網絡圖片
注意：如果圖片尺寸 小于 容器標簽設置的大小仑荐，圖片會自動在容器內水平和垂直方向進行平鋪填充 (平鋪多張此圖片)
如果網頁上出現(xiàn)了圖片，瀏覽器會再次發(fā)送請求獲取圖片
背景平鋪：background-repeat 默認是平鋪伪阶，可控制不平鋪煞檩、水平方向平鋪、垂直方向平鋪
標簽 #id .class { background-repeat:repeat; }
取值：
repeat：默認栅贴，水平垂直都平鋪
norepeat：不平鋪
repeat-x：水平方向平鋪
repeat-y：垂直方向平鋪
應用場景：可以通過背景圖片的平鋪降低圖片的大小斟湃，減少不必要的網頁下載，增強用戶體驗效果檐薯。
用一張很少純色的圖片平鋪整個網頁背景凝赛、平鋪大面積相同背景、平鋪導航欄坛缕、增強用戶體驗效果墓猎。
：同一個標簽可同時設置背景顏色和圖片，圖片會覆蓋顏色祷膳。
背景定位屬性：用來控制背景圖片位置的
background-position:left top; // 默認(左 上)
取值：
具體方向：left center right / top center bottom
具體像素：可接受 負數(shù)值
background-position:100px 20px; // 圖片距離左邊100像素陶衅，距離頂部20像素
在一些大型網站中，首頁的背景圖片都做的很大直晨，重要的部門在中間搀军，用戶放大網頁時才會顯示兩邊的內容，所以需要設置下在的CSS：
background-position:center top; // (水平居中勇皇，頂部不變)
不管你如何放大 縮小網頁罩句，總能看到中間重要的部分。
背景縮寫：
格式：{background:背景顏色 背景圖片 平鋪方式 關聯(lián)方式 定位方式;}
background: green url(img/girl.jpg) no-repeat right bottom;
注意：上面的5個屬性都不是必須存在敛摘，都可以省略门烂，但順序不能錯。
關聯(lián)方式background-attachment：當瀏覽網頁時，向下滾動時屯远，背景圖片會隨著滾動條滾動蔓姚，滾動出視覺范圍。關聯(lián)方式的作用是把背景圖片定位在某一個位置慨丐，滾動時坡脐，圖片不會移動。
格式：
{background-attachment:fixed;} (默認是 scroll 會隨著滾動條滾動出界)
背景圖片方式和插入圖片方式：
1房揭、背景圖片僅僅是一個背景备闲，不會占用容器位置。插入圖片會占用容器位置捅暴。
2恬砂、背景圖片有定位屬性，可以很方便控制圖片位置蓬痒。插入圖片沒有定位屬性泻骤，不能控制圖片位置。
3乳幸、插入圖片的語義比背景圖片強瞪讼，如果你的圖片想被搜索引擎收錄，推薦使用插入圖片的方式
CSS精靈圖：很多小圖片合成一張大圖片
問題：由于一些大型的網頁上的的各種小圖片成百上千張粹断，瀏覽器每次要拿一張小圖片符欠，都會去請求一次服務器，如果瀏覽人數(shù)較多瓶埋，會造成服務器的訪問量壓力巨大希柿。
CSS精靈圖作用：減少瀏覽器請求次數(shù)、降低服務器壓力养筒。
CSS精靈圖曾撤，需要配合背景圖片和背景定位來使用。
