什么是background往果？
一個元素的背景是在其content,padding和border下的內(nèi)容（當(dāng)然，在新的瀏覽器里可以通過使用background-clip屬性改變背景所占用的區(qū)域）
background具有多種不同的屬性
- background-color：設(shè)置元素的背景色
- background-image：為頁面元素指定一個或多個背景圖
- background-position：指定背景圖片的初始位置
- background-repeat：指定背景圖片是否以平鋪效果重復(fù)出現(xiàn)，以及重復(fù)的方式
- background-attachment：決定背景是在視口中固定的還是隨包含它的區(qū)塊滾動的
- background: 將以上五個屬性簡寫在一起
- background-size：設(shè)置背景圖片大小
background-color
- background-color的默認(rèn)值是transparent而不是white
- 該屬性的使用務(wù)必要考慮到瀏覽器的兼容問題篓跛，在編寫代碼時最好先給一個基礎(chǔ)的背景色再去設(shè)置比較鮮明的特點
舉個例子
html
<p>我想擁有一個背景色</p>
CSS
p{
padding: 20px;
background-color: yellow;
}
以下為結(jié)果
background-image
background-image最簡單的用法就是url(圖片的路徑)，這樣就會選取一張圖片插入到背景區(qū)域
p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png)
}
以下為結(jié)果
額，這個結(jié)果看起來并不是很好蝙眶，背景圖片看起來一直在重復(fù)且沒有美感，這就需要利用以下的屬性來修改
注：background只是背景而已褪那，并不是網(wǎng)頁內(nèi)容的一部分幽纷，如果想讓圖片包含網(wǎng)頁內(nèi)容之中的話應(yīng)該使用img標(biāo)簽
background-repeat
background-repeat的默認(rèn)值是令圖片在水平和垂直方向不斷重復(fù)直至填滿整個元素，其他的值包括
- no-repeat：圖片不會重復(fù)顯示博敬，只會顯示一次
- repeat-x：背景圖片會沿著水平方向不斷重復(fù)
- repeat-y：背景圖片會沿著垂直方向不斷重復(fù)
讓我們來修飾代碼
p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png);
background-repeat: no-repeat;
}
以下為結(jié)果
這樣看起來似乎好一點了友浸，但是背景圖片確實覆蓋了文本內(nèi)容，我們可能需要將背景圖片重新定一下位
background-position
一般來說偏窝，background-position將會取兩個值收恢，中間用空格隔開，他指定了圖片的XY坐標(biāo)——定位到圖片左上角的點祭往。想象這個背景是一張圖片伦意，X坐標(biāo)從左到右，Y坐標(biāo)從上到下
屬性的取值大致有以下幾種
- 絕對值類似像素硼补，比如
background-position: 200px 25px; - 相對值類似rems驮肉，比如
background-position: 20rem 2.5rem - 百分比，比如
background-position: 90% 25% - 關(guān)鍵字已骇，比如right center缆八，這兩個值比較直觀，并且可以分別取左疾捍，中奈辰，右，和頂部乱豆，中部奖恰，底部的值
值得注意的是你也可以將這些值混合起來用，比如background-position: 99% center宛裕，同時如果只指定了一個值瑟啃，那這個值代表水平的值，垂直方向的默認(rèn)為center揩尸。
讓我們再次修飾我們的代碼
p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png);
background-repeat: no-repeat;
background-position: 99%;
}
以下為結(jié)果
background-attachment
background-attachment指定了當(dāng)網(wǎng)頁的內(nèi)容滾動時背景如何滾動蛹屿，他有以下的值
- scroll：背景圖像會隨著頁面其余部分的滾動而移動
- fixed：當(dāng)頁面的其余部分滾動時，背景圖像不會移動
- local：背景圖像會隨著頁面其余部分的滾動而移動
- demo
這部分沒搞懂...需要高人指點
background簡寫
在一條語句里面聲明多種background屬性是可行的岩榆，屬性與屬性之間應(yīng)該用空格分隔開错负，比如
background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;
我們將我們以上分不同步驟寫的代碼用一條語句代替
p{
padding: 20px;
background: yellow url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png) no-repeat 99%
}
結(jié)果和之前的結(jié)果完全一樣
簡寫的模板如下
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
background-size
background-size可以允許你修改背景圖片的尺寸以更好的適用于你的設(shè)計坟瓢，對于每一張圖片，你需要2個參數(shù)：水平的和垂直的犹撒，例如
p{
padding: 20px;
background: yellow url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png) no-repeat 99% / 10%;
}
以下為結(jié)果
數(shù)值還可以是%和rems等,還可以是cover和contain
- px
- 第一個值設(shè)置寬度折联，第二個值設(shè)置高度。
如果只設(shè)置一個值识颊，則第二個值會被設(shè)置為 "auto" - %
- 第一個值設(shè)置寬度诚镰，第二個值設(shè)置高度。
如果只設(shè)置一個值祥款，則第二個值會被設(shè)置為 "auto" - cover
- 把背景圖像擴展至足夠大清笨，以使背景圖像完全覆蓋背景區(qū)域
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中 - contain
- 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
參考文章：
2015.8.16第一次更新
