1、背景顏色

background-color:屬性設(shè)置標(biāo)簽的背景顏色

2、背景圖片

background-image: url();
? ? ? ? ? ?2-1、 如果圖片的大小沒有標(biāo)簽的大小大, 那么會自動在水平和垂直方向平鋪來填充
? ? ? ? ? ?2-2、如果網(wǎng)頁上出現(xiàn)了圖片, 那么瀏覽器會再次發(fā)送請求獲取圖片

3、背景平鋪

background-repeat：取值有repeat（默認(rèn)）、no-repeat、repeat-x、repeat-y
? ? ? ? ? ? ??應(yīng)用場景:
????????????????????????????????可以通過背景圖片的平鋪來降低圖片的大小, 提升網(wǎng)頁的訪問速度

4、背景定位

background-position:水平方向? 垂直方向
? ? ? ? ? ? ? ?取值：
? ? ? ? ? ? ? ? ? ? ? ? （1）單詞：水平方向: left center right????????垂直方向: top center bottom
? ? ? ? ? ? ? ? ? ? ? ? （2）像素（注意像素可為負(fù)數(shù)）

應(yīng)用場景：電腦的分辨率有很多種，當(dāng)圖片比較大的時候, 可以通過定位屬性（例：background-position:center? ? top）保證圖片永遠(yuǎn)居中顯示

5、背景關(guān)聯(lián)

background-attachment:
? ??????????????????????????????????????????scroll 默認(rèn)值， 會隨著滾動條的滾動而滾動
????????????????????????????????????????????fixed 不會隨著滾動條的滾動而滾動

默認(rèn)情況下背景圖片會隨著滾動條的滾動而滾動， 如果不想讓背景圖片隨著滾動條的滾動而滾動， 那么就可以修改背景圖片和滾動條的關(guān)聯(lián)方式

注意：當(dāng)元素滾出了屏幕，背景圖片也會消失

6、背景屬性連寫

background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;

注意點(diǎn)：background屬性中， 任何一個屬性都可以被省略，順序也可以隨便

7、插入圖片和背景圖片的區(qū)別

（1）插入圖片會占用位置

（2）插入圖片沒有定位屬性, 所以控制圖片的位置不太方便

（3）插入圖片的語義比背景圖片的語義要強(qiáng), 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片，像那些

電商網(wǎng)站要進(jìn)行產(chǎn)品展示的圖片一個是插入圖片，因?yàn)樾枰鲆粋€動畫效果

8、背景色漸變：

background:linear-gradient():兼容性問題嚴(yán)重，**需要添加瀏覽器私有前綴**

格式：

（1）background:linear-gradient(漸變的起始位置，起始顏色，結(jié)束顏色);

**栗子：background: `-webkit-`linear-gradient(top, red ，yellow);**

（2）background:linear-gradient(漸變的起始位置，顏色 位置，顏色 位置...);

**栗子：background:-o-linear-gradient(top, red 0%, blue 30%, yellow 100%);**

用法，經(jīng)驗(yàn)

（1）如果一張圖片上還有其他圖片，一般都是用div嵌套div（里面的div的寬高應(yīng)當(dāng)和最外面的div的寬高一樣，這樣才便于調(diào)整），然后在div中設(shè)置背景圖片，再調(diào)整位置。

css精靈圖? ?? ? ?

作用：可以減少請求的次數(shù), 以及可以降低服務(wù)器處理壓力

?CSS的精靈圖需要配合背景圖片和背景定位來使用?