摘要：就目前為止，還沒(méi)有到好玩的地步，只要知道會(huì)蓋在上面，然后如果在后面寫(xiě)半角英文逗號(hào)的話，就可以玩多背景圖了，比如。

background是在CSS中使用率很高的一個(gè)屬性之一，由最初的幾個(gè)簡(jiǎn)單的屬性到現(xiàn)在新增了很多的屬性，比如background-size、background-origin以及background-clip等屬性，還可以設(shè)置多背景來(lái)達(dá)到更多的炫酷效果。

  
以下要談的東西請(qǐng)不要在IE6中查看，只是在一些版本比較新的瀏覽器中玩耍娛樂(lè)，雖然有些代碼在IE6中也是有效的。

其實(shí)background是一個(gè)復(fù)合屬性，這個(gè)大家都知道，因?yàn)檫@個(gè)屬性中包含了很多屬性，比如：

background-color

background-image

background-position

background-attachment

background-repeat

  
應(yīng)該沒(méi)有遺漏吧……基本上都是直接寫(xiě)background屬性，多帶帶分開(kāi)寫(xiě)總是令我自己提心吊膽的，感覺(jué)好像遺漏了什么。

然后隨著CSS3這個(gè)強(qiáng)大的東西到來(lái)之后，又新增了幾個(gè)屬性：

background-size

background-origin

background-clip

這里沒(méi)有多背景的屬性（Multiple Background Images），因?yàn)槎啾尘暗膶傩云鋵?shí)就是用一個(gè)半角的逗號(hào),隔開(kāi)而已。

這個(gè)屬性大家都知道，寫(xiě)CSS肯定都知道，不知道的話，我覺(jué)得就肯定沒(méi)寫(xiě)過(guò)CSS了。不知道我這樣說(shuō)大家認(rèn)同不認(rèn)同，我覺(jué)得挺對(duì)的。對(duì)于background-color這個(gè)屬性，用起來(lái)很簡(jiǎn)單，跟多背景圖沒(méi)有任何關(guān)系，僅僅只要知道顏色值在CSS中是怎么表示的就可以了，比如十六進(jìn)制的方式#F32600、或者用RGB的方式rgb(200,200,125)，當(dāng)然還有hsl之類的方式，反正只要知道，那肯定就能得到這樣一個(gè)背景色的寫(xiě)法：

background-color: #F32600;

好吧，廢話扯了一堆，其實(shí)我想說(shuō)的是，這個(gè)background-color的顯示區(qū)域是跟background-clip有關(guān)的，請(qǐng)看圖：

demo: http://jsbin.com/fiyazayuho/2/

div {float: left;width: 200px;height: 60px;border: 5px dashed #f00;margin:0 20px 20px 0;padding:30px;background-color: #ff0;}
div + div {background-clip: border-box;}
div + div + div {background-clip: padding-box;}
div + div + div + div {background-clip: content-box;}

背景色看過(guò)了，那么就是看看背景圖片的引用，只要在background-image中，添加url地址就可以，比如：background-image: url()，這個(gè)括號(hào)里的地址可以是相對(duì)路徑也可以是絕對(duì)路徑，反正只要是有效路徑就可以，但建議不要用中文/全角字符，如果有空格的話，那么就建議個(gè)路徑加上引號(hào)，當(dāng)然如果沒(méi)有這些特殊的命名方式，或許就更好了。

就目前為止，background-image還沒(méi)有到好玩的地步，只要知道background-image會(huì)蓋在background-color上面，然后如果在url()后面寫(xiě)半角英文逗號(hào)的話，就可以玩多背景圖了，比如：background-image: url(name1.jpg), url(name2.png), url(name3.gif);。

效果就好像這樣：

然后如果我們簡(jiǎn)單玩一下多背景圖片的話，那就是這樣了：

demo: http://jsbin.com/lusuce/1/

div {width: 100px;height: 50px;padding: 50px;
    background-color:#ccc;
    background-image:url(http://sfault-avatar.b0.upaiyun.com/166/281/166281916-1140000000145114_big64);
    background-repeat: no-repeat;
}

div ~ div {
    background-image: url(http://sfault-avatar.b0.upaiyun.com/604/519/6045191-1140000000383699_big64), url(http://sfault-avatar.b0.upaiyun.com/166/281/166281916-1140000000145114_big64), url(http://sfault-avatar.b0.upaiyun.com/393/562/3935623170-1140000000142909_big64), url(http://sfault-avatar.b0.upaiyun.com/287/570/2875704635-1140000000145753_big64);
    background-position:top left, top right, bottom left, bottom right;
}

背景定位這個(gè)東西寫(xiě)CSS的朋友肯定都知道怎么用，不然就玩不了CSS Sprite，不過(guò)大家一般用的時(shí)候，屬性值都是top、left、center、bottom等組合，或者要么就是百分值和px值這幾種，對(duì)于這幾種大家都已經(jīng)很屬性了，也沒(méi)什么好說(shuō)的，都是相對(duì)于容器的左上角來(lái)計(jì)算的。

不過(guò)這里需要提一點(diǎn)的就是，background-position的位置是跟background-origin相關(guān)的，并且如果設(shè)置了background-clip的話，那么效果又不一樣了，感覺(jué)上這幾個(gè)的關(guān)聯(lián)性還不小哦。具體的效果等一下我們看了background-origin和background-clip的屬性值之后，就會(huì)明白了。

background-origin的作用是用于處理背景定位的原點(diǎn)坐標(biāo)位置，共有三個(gè)屬性值：

border-box

padding-box

content-box

這三個(gè)屬性值，如果了解盒模型的同學(xué)肯定就明白了，分別就是針對(duì)邊框、內(nèi)邊距、內(nèi)容區(qū)域三個(gè)部分的左上角為坐標(biāo)。借用w3c官網(wǎng)上的一張圖片來(lái)簡(jiǎn)單溫習(xí)一下盒模型。

從這個(gè)盒模型中可以看到，如果我們對(duì)一個(gè)容器設(shè)置了邊框或者內(nèi)邊距的時(shí)候，那么背景的原點(diǎn)位置肯定就是會(huì)受到影響了。那么我們結(jié)合前面的background-position來(lái)做一個(gè)簡(jiǎn)單的效果：

demo: http://jsbin.com/hitoji/1/

div {width: 50px;height: 50px;border: 10px dashed #f00;padding:20px;
    background-image: url(http://sfault-avatar.b0.upaiyun.com/196/388/1963885910-54af96065b546_big64);
    background-repeat: no-repeat;
    background-origin: border-box;
}
div ~ div {background-origin: padding-box;}
div ~ div ~ div {background-origin: content-box;}

從這里可以看到三個(gè)值的改變之后，效果背景圖片的所在位置就完全不一樣了，不過(guò)在背景中還有一個(gè)新增的屬性，再加上去后，會(huì)發(fā)現(xiàn)更不一樣的效果。

背景修剪的位置，這個(gè)也是根據(jù)background-origin屬性值來(lái)改變效果的，那么我們基于上面的那個(gè)demo，再增加點(diǎn)東西看看效果。這里要提一下的是，background-clip的屬性值跟background-origin是一樣的，都是：

border-box

padding-box

content-box

這個(gè)屬性基本上來(lái)說(shuō)，現(xiàn)在大家似乎都不會(huì)去關(guān)注，個(gè)人感覺(jué)好像是這樣的。不過(guò)不管是不是這樣，反正我知道我個(gè)人真的沒(méi)去關(guān)注過(guò)，而且經(jīng)常會(huì)搞不靈清background-attachment的屬性值區(qū)別。基本上的作用就是定義一張不重復(fù)的圖片隨著內(nèi)容區(qū)域的滾動(dòng)而滾動(dòng)，好吧，我感覺(jué)自己又把概念混亂了。

先看這個(gè)屬性有三個(gè)屬性值：

fixed

local

scroll

然后從分別看他們的區(qū)別吧，這樣應(yīng)該就能讓我自己清楚了，或許也能讓你們?cè)诳催@里的時(shí)候也清楚了。

body {height: 1000px;}
div {width: 300px;height: 300px;border: 1px solid #f00;
    background-image:url(http://sfault-avatar.b0.upaiyun.com/286/347/2863479281-1030000000341132_huge256);
    background-repeat: no-repeat;
    background-attachment: scroll; /* 會(huì)在這里改變屬性值 */
}

首先是默認(rèn)的屬性值scroll：

那么這個(gè)時(shí)候，我們把scroll的值修改為fixed后再看看效果：

很明顯看到了對(duì)比，好吧，這個(gè)時(shí)候我自己也清楚了這兩個(gè)屬性的區(qū)別了，不過(guò)這兩個(gè)屬性值現(xiàn)在是在div標(biāo)簽里的，如果放在body標(biāo)簽里又會(huì)怎么樣呢，我想效果應(yīng)該也是會(huì)有區(qū)別的，有興趣想試試的可以嘗試一下。

那么現(xiàn)在來(lái)看第三個(gè)新的屬性值：local這玩意，看這個(gè)的話，我們就在body標(biāo)簽里也增加一個(gè)背景圖片，做一個(gè)對(duì)比看看效果。

http://jsbin.com/cenipe/1/

不知道看的效果是不是這樣呢？

background-repeat這個(gè)也是大家最常用的一個(gè)背景屬性了，對(duì)于這個(gè)屬性，我們一般也就是用到repeat、no-repeat、repeat-x和repeat-y這么四種，對(duì)于這四種，其實(shí)大家也都是很好理解的，無(wú)非就是各個(gè)方向都重復(fù)、都不重復(fù)、X軸重復(fù)和Y軸重復(fù)，然后結(jié)合盒模型的原理，就可以猜想到是從容器的原點(diǎn)位置，以X軸或者Y軸進(jìn)行重復(fù)平鋪背景圖片，如果一張圖片在容器中沒(méi)有完全顯示的話。

其實(shí)吧，就算背景圖片的寬高比容器的寬高要大，我覺(jué)得背景圖片一樣還是在平鋪著的，只是超出了容器的范圍，看不到了而已。

對(duì)于這四個(gè)屬性都是常用的，大家都知道，也沒(méi)啥說(shuō)的，不過(guò)，新增的兩個(gè)屬性不知道各位知道不，我覺(jué)得挺好玩的，分別是：

space

round

這兩個(gè)屬性使用起來(lái)，背景圖片就靈活很多了。

根據(jù)背景圖片的大小，然后通過(guò)計(jì)算容器的大小來(lái)平鋪背景，多余的部分用空白來(lái)填充，這樣的平鋪方式是不會(huì)出現(xiàn)圖片被截成一半的情況，如圖：

具體的效果，大家可以看看這個(gè)demo：http://jsbin.com/wigaxi/1/

根據(jù)背景圖片的大小，然后通過(guò)計(jì)算容器的大小，壓縮圖片來(lái)填充容器，這樣的平鋪方式也是不會(huì)出現(xiàn)圖片截成一半的情況，不過(guò)跟background-repeat: space;不同的是這種填充方式不會(huì)出現(xiàn)空白的區(qū)域，而是會(huì)去壓縮圖片的大小來(lái)適應(yīng)容器，如圖：

具體的效果，大家還是可以直接看看demo效果：http://jsbin.com/wefuwa/1/

影響background-repeat的屬性無(wú)非也就是background-origin這個(gè)屬性了，這個(gè)屬性直接改變了背景在一個(gè)容器中的計(jì)算顯示方式，就跟box-sizing一樣，直接影響到了盒模型的表現(xiàn)方式，具體的也就不做demo了，有興趣的可以增加這個(gè)屬性嘗試一下，會(huì)發(fā)現(xiàn)原來(lái)不會(huì)出現(xiàn)被截?cái)嗟谋尘皥D片，似乎出現(xiàn)了截?cái)嗟娘@示效果了。

剛在前面提到了box-sizing屬性，那么在背景中也有一個(gè)size相關(guān)的屬性，就是background-size，但這個(gè)并不是去改變盒模型的屬性，而是讓背景圖片按照一定的比列去適應(yīng)容器的一個(gè)屬性。簡(jiǎn)單來(lái)說(shuō)，這個(gè)屬性就是會(huì)拉伸、縮小背景圖片大小的，將以往不能改變背景圖片大小的慣例打破了。

先來(lái)看一個(gè)示例：

在這個(gè)示例中我們可以看到，當(dāng)沒(méi)有background-size的時(shí)候，一張背景圖片是很老實(shí)得呆在左上角，并且是保持著原來(lái)的大小，當(dāng)然，有了這個(gè)屬性，它還是呆在左上角，不同的是，這張背景圖片的尺寸改變了：

100%： 一個(gè)值的時(shí)候，其實(shí)就是把寬高都拉伸到相對(duì)于容器的寬度，簡(jiǎn)單來(lái)說(shuō)，撐滿了；

50%： 這個(gè)當(dāng)然就是寬高都只有容器的一半（50%）的時(shí)候；

100% 50%： 這個(gè)呢就是寬度相對(duì)容器是100%的，而高度是50%；

從上面三個(gè)情況來(lái)看，大家應(yīng)該已經(jīng)很清楚的明白了background-size的值是針對(duì)容器的，并且是先寬度再高度。

那么我們現(xiàn)在用的是%這個(gè)百分比的相對(duì)單位，其實(shí)我們也是可以用px來(lái)表示啊，或者是em，當(dāng)然也可以是現(xiàn)在很多人喜歡用的rem作為單位值來(lái)使用。

如果不想用這些單位來(lái)計(jì)算的話，那么其實(shí)還有一個(gè)方式，就是用下面這三種值：

auto

contain

cover

這三種屬性值中auto沒(méi)什么說(shuō)的，大家都懂，該是怎么樣的就是怎么樣，不同的是后面兩種，會(huì)去強(qiáng)制將背景圖片做一些改變。

等比縮放，以最大的尺寸填充到容器中，但不一定會(huì)撐滿容器，而出現(xiàn)背景圖片顯示不全的情況：

等比縮放，以最小的尺寸填充到容器中，一定會(huì)撐滿容器，且可能會(huì)出現(xiàn)背景圖片顯示不全的情況：

一個(gè)簡(jiǎn)單的background屬性，現(xiàn)在折騰出來(lái)的效果也真的是多啊，如果把各種屬性結(jié)合在一起，估計(jì)出現(xiàn)什么效果有時(shí)候自己都想象不到，尤其是新增的幾個(gè)屬性，特別是background-origin和background-size，改變了曾經(jīng)對(duì)background的一些看法。

然后結(jié)合多背景圖片的話，那將又是一個(gè)神奇的世界，關(guān)于多背景和background的縮寫(xiě)，也沒(méi)什么好說(shuō)的了，一筆帶過(guò)吧。

用英文半角逗號(hào)隔開(kāi)，如果要用簡(jiǎn)寫(xiě)模式的話，那么就先寫(xiě)完一個(gè)background簡(jiǎn)寫(xiě)屬性后，再用,半角逗號(hào)隔開(kāi)，繼續(xù)寫(xiě)，如：

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

以前沒(méi)有那么多新增屬性的時(shí)候，簡(jiǎn)寫(xiě)就是：

background: url(a.png) top left no-repeat fixed #000;

現(xiàn)在有了之后，就稍微改變了一下，不過(guò)也相差不多：

background: url(a.png) top left / cover no-repeat fixed content-box content-box #000

格式就是：

  ||  [ /  ]? ||  ||  ||  ||  || <"background-color">  

background的規(guī)則是這樣，但是最終如果多個(gè)屬性結(jié)合在一起，真不知道會(huì)變成什么樣。看著是一個(gè)個(gè)很簡(jiǎn)單的屬性，但是多個(gè)在一起，或許會(huì)讓背景更漂亮，或許也會(huì)讓你的背景變得很難看……