摘要：就目前為止，還沒有到好玩的地步，只要知道會蓋在上面，然后如果在后面寫半角英文逗號的話，就可以玩多背景圖了，比如。

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

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

其實background是一個復合屬性，這個大家都知道，因為這個屬性中包含了很多屬性，比如：

background-color

background-image

background-position

background-attachment

background-repeat

  
應該沒有遺漏吧……基本上都是直接寫background屬性，多帶帶分開寫總是令我自己提心吊膽的，感覺好像遺漏了什么。

然后隨著CSS3這個強大的東西到來之后，又新增了幾個屬性：

background-size

background-origin

background-clip

這里沒有多背景的屬性（Multiple Background Images），因為多背景的屬性其實就是用一個半角的逗號,隔開而已。

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

background-color: #F32600;

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

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;}

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

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

效果就好像這樣：

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

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;
}

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

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

background-origin的作用是用于處理背景定位的原點坐標位置，共有三個屬性值：

border-box

padding-box

content-box

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

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

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;}

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

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

border-box

padding-box

content-box

這個屬性基本上來說，現(xiàn)在大家似乎都不會去關(guān)注，個人感覺好像是這樣的。不過不管是不是這樣，反正我知道我個人真的沒去關(guān)注過，而且經(jīng)常會搞不靈清background-attachment的屬性值區(qū)別?；旧系淖饔镁褪嵌x一張不重復的圖片隨著內(nèi)容區(qū)域的滾動而滾動，好吧，我感覺自己又把概念混亂了。

先看這個屬性有三個屬性值：

fixed

local

scroll

然后從分別看他們的區(qū)別吧，這樣應該就能讓我自己清楚了，或許也能讓你們在看這里的時候也清楚了。

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; /* 會在這里改變屬性值 */
}

首先是默認的屬性值scroll：

那么這個時候，我們把scroll的值修改為fixed后再看看效果：

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

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

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

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

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

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

對于這四個屬性都是常用的，大家都知道，也沒啥說的，不過，新增的兩個屬性不知道各位知道不，我覺得挺好玩的，分別是：

space

round

這兩個屬性使用起來，背景圖片就靈活很多了。

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

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

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

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

影響background-repeat的屬性無非也就是background-origin這個屬性了，這個屬性直接改變了背景在一個容器中的計算顯示方式，就跟box-sizing一樣，直接影響到了盒模型的表現(xiàn)方式，具體的也就不做demo了，有興趣的可以增加這個屬性嘗試一下，會發(fā)現(xiàn)原來不會出現(xiàn)被截斷的背景圖片，似乎出現(xiàn)了截斷的顯示效果了。

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

先來看一個示例：

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

100%： 一個值的時候，其實就是把寬高都拉伸到相對于容器的寬度，簡單來說，撐滿了；

50%： 這個當然就是寬高都只有容器的一半（50%）的時候；

100% 50%： 這個呢就是寬度相對容器是100%的，而高度是50%；

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

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

如果不想用這些單位來計算的話，那么其實還有一個方式，就是用下面這三種值：

auto

contain

cover

這三種屬性值中auto沒什么說的，大家都懂，該是怎么樣的就是怎么樣，不同的是后面兩種，會去強制將背景圖片做一些改變。

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

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

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

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

用英文半角逗號隔開，如果要用簡寫模式的話，那么就先寫完一個background簡寫屬性后，再用,半角逗號隔開，繼續(xù)寫，如：

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

以前沒有那么多新增屬性的時候，簡寫就是：

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

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

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

格式就是：

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

background的規(guī)則是這樣，但是最終如果多個屬性結(jié)合在一起，真不知道會變成什么樣?？粗且粋€個很簡單的屬性，但是多個在一起，或許會讓背景更漂亮，或許也會讓你的背景變得很難看……