background應該是CSS里使用頻率頗高的屬性，簡單實用。但參數偏多，本篇就介紹一下background的各種特性。

CSS3之前主要有5個屬性：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS3增加了3個屬性：

• background-origin
• background-clip
• background-size

background-color：背景色，默認值transparent，不贅述。

background-image：背景圖，默認值none?？捎胾rl指定圖片地址，可以是相對地址，也可以是絕對地址，不贅述。

background-repeat：no-repeat，repeat-x，repeat-y，repeat。默認值repeat。CSS3增加了兩個值space，round。前4個效果見下圖。左圖no-repeat就是背景圖的原始尺寸，依次是水平重復，垂直重復，全方位重復。有個兩個細節要注意：

1. 背景圖是起始于盒子模型中padding-box的左上角，而非content區域的左上角。如果你設置了padding，padding區域也會被背景圖覆蓋。
2. 重復都是正向反向兩端重復。例如repeat-x，往右重復效果很明顯，但仔細看發現也會往左重復（左邊框底下也有圖片），不要誤以為只往右重復。同理repeat-y，也會往上重復（上邊框底下也有圖片）。同理repeat是全方位重復，4條邊框底下均有圖片

space表示兩端平鋪，保持背景圖原始尺寸。round表示兩端對齊，會適當拉伸背景圖。例如左圖background-repeat: space no-repeat;水平兩端平鋪，垂直不重復。右圖background-repeat: round no-repeat;水平兩端對齊，垂直不重復。左圖好理解，不贅述。右圖round no-repeat和repeat-x看起來效果差不多，但仔細看其實是有區別的，round會拉伸圖片以實現兩端對齊，但repeat-x是保持背景圖原始尺寸的前提下簡單重復。

例如在ul的頂部設一個陰影背景，提示用戶到頂了（如下左圖）。當用戶滾動滾動條時，頂部陰影消失（如下右圖）。即滾動條在頂部時，出現陰影，不在頂部時陰影消失：

ul {
    width: 5em;
    height: 7em;
    border: 1px solid silver;
    padding: .3em .5em;
    overflow: auto;
    background: radial-gradient(at top, rgba(0,0,0,.3), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 10px;
    background-attachment: local;
}

這個效果在local屬性未出現之前是很難實現的。如果你將background-attachment設成scroll，背景只會在頁面發生滾動時才滾動，但顯然ul元素內部滾動時頁面不會發生滾動，因此頂部陰影將永遠不會消失。只有通過CSS3新增的local屬性，才能將背景和元素內容綁定，ul元素內部滾動時，背景陰影同時滾動，達到消失的效果。

background-position：背景圖水平和垂直起點。默認值0% 0%，即起點是在padding-box（你可以用background-origin改成border-box或content-box）的左上角?？稍O百分比也可設px值。正值會往正向偏移（以左上角為起點，往右和往下是正反向，往左和往上是反方向）。例如左圖background-position: -10px 10px;右圖background-position: 10px -10px;（為演示效果均設成no-repeat）。50%可以用關鍵字center代替。

background-position: left 10px top 10px;
background-position: left 10px bottom 10px;
background-position: right 10px top 10px;
background-position: right 10px bottom 10px;

如果嫌指定left，right麻煩，其實用background-position配合calc也可以輕松實現定位，例如將圖片定位到距離右下角20px的地方。我們不指定right，bottom，仍舊以左上角為原點：

background-position: calc(100% - 20px) calc(100% - 10px);

上面這5個屬性是CSS1里就定義了，CSS3只不過做了適當的擴展。下面是介紹的是CSS3里新增的屬性。

background-origin：content-box，padding-box（默認值），border-box。該屬性決定了背景圖片原點在盒子模型哪里。默認值padding-box表示背景圖原點在content+padding區域。同理content-box表示背景圖原點在content區域。border-box表示背景圖原點在content+padding+border區域。左圖content-box（div有5px的padding），中圖padding-box，下圖border-box（可以看出背景圖原點是在邊框外經處，背景圖部分跑到了邊框底部）

/* 左圖 */
background: red url(bg50.png) no-repeat;
background-origin: content-box;
/* 右圖 */
background: red url(bg50.png) no-repeat;
background-clip: content-box;

同樣設成了content-box。左圖background-origin將背景圖片的原點設為content區域左上角。右圖background-clip設為content-box的意思是：將content區域外的所有背景相關內容（包括背景色和超出部分的背景圖片）剪裁掉。

在上面代碼的基礎上，將左圖background-origin和右圖background-clip都改成padding-box

左圖background-origin將背景圖片的原點設為padding-box區域左上角。右圖background-clip設為padding-box的意思是：將padding-box區域外的所有背景相關內容剪裁掉，看效果只剪裁掉了border下面的背景色，而背景圖片沒有被剪裁。道理很簡單，因為背景圖片默認的background-origin就是padding-box，因此沒有超出padding-box區域的部分。

在上面代碼的基礎上，將左圖background-origin和右圖background-clip都改成border-box

原理和上面都一樣，不再贅述。

background-size：px值，%百分比，cover，contain，auto（默認值）。在CSS2.1之前，我們是沒有辦法控制背景圖片的大小的。CSS3可以用該屬性來控制背景圖片的大小。例如background-size: 10px 20px;第一個是width，第二個是height，如果只設一個值，第二個值將成為auto（意思是保持原始寬高比例）。

關鍵字cover將按比例縮放圖片來填充滿整個背景區域。contain將保持原圖比例的前提下，縮放圖片來填充背景區域。左圖background-size: cover;，右圖background-size: contain;

原圖是150*200px，cover通過縮放會完全充滿背景區域，但可能會出現圖片扭曲或截斷，因此多用在背景圖片比容器小的情況下。contain會保證原圖比例的前提下盡量填滿背景區域，但可能出現沒完全填滿的情況，因此多用在背景圖片比容器大的情況下。

小Tips：嫌cover，contain自適應縮放不居中的話，可以加上background-position: center;

至此background的各屬性介紹完畢。我們可以單獨指定background各屬性，也可以將原始的5個屬性合并到一起指定，CSS3新增的3個屬性請單獨指定。

未指定的屬性將被瀏覽器自動設為默認值。如background: red;等價于background: red none repeat repeat scroll 0% 0%;。CSS3新增的3個屬性也會被設為默認值：padding-box border-box auto

下面介紹下CSS3多背景屬性

CSS3之前每個容器只能指定一張背景圖片，要實現多個背景圖片的效果，需要HTML端多個容器疊加，比較麻煩。CSS3開始可以直接在一個容器上指定多張圖片。

指定多張圖片時，只有background-color屬性是無法指定多個的，因為該屬性是隸屬于容器而非背景圖片的。你可以單獨為多張圖片指定background屬性，也可以合并在一起指定。

單獨為多張圖片指定background屬性格式：

background-image: url(bg.png), url(bg50.png), url(bgheader.jpg);
background-repeat: repeat-x, repeat-y, no-repeat;
background-attachment: scroll, scroll, scroll;
background-position: center, right 10px bottom 10px, left top; 
background-origin: content-box, padding-box, border-box;
background-clip: border-box, padding-box, content-box;
background-size: auto, 50% auto, 50% 50%;

各屬性第一個逗號是圖1，各屬性第二個逗號是圖2，各屬性最后一個值是圖3。上面代碼最終效果是圖4。從圖中也可以看出層疊關系，第一個逗號的圖1在最上層，依次往下是第二個逗號的圖2和最后一個值的圖3。當然最底層肯定是容器的background-color。

你也可以將各屬性合并在一起寫，中間仍舊用逗號隔開，效果和上圖4是一樣的：

background: url(bg.png) repeat-x scroll center,
            url(bg50.png) repeat-y scroll right 10px bottom 10px,
            url(bgheader.jpg) no-repeat scroll left top;
background-origin: content-box, padding-box, border-box;
background-clip: border-box, padding-box, content-box;
background-size: auto, 50% auto, 50% 50%;

不論你單獨寫還是合并寫，最后加一個background-color屬性（如果容器需要背景色）。

綜合應用

現在用background實現邊框為一張照片的效果：

你可能還會想到用兩層div，外層div的background加載圖片，內層div的background設成白色即可。這樣是可以實現的，但需要額外增加一層div標簽，而我們希望只用一層div配合background就能實現。

我們的思路是：利用上面介紹的background的多背景屬性，為div的background指定兩層背景，底層背景加載圖片，上層白色背景利用漸變的實色效果來實現（關于漸變實色你可以點這里）

.borderImage {
    border: 1em solid transparent;
    background: linear-gradient(white, white),
                url(stone-art.jpg);
    background-size: cover;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    width: 21em;
    padding: 1em;
    overflow: hidden;
    resize: both;
}

第一行設定border，指定為transparent讓其透明。

第二行指定background。上層用linear-gradient實現白色背景，并指定background-clip為padding-box讓其不要覆蓋到border。下層背景加載圖片，為了實現背景隨元素大小而改變，需要指定background-size為cover。因為上層圖片將background-clip設成了padding-box，因此需要為下層圖片改回border-box。最后指定background-origin為border-box，否則默認padding-box的話，下層圖片背景會出現重復，導致border里的圖片非常詭異。

最下面加上resize方便你元素右下角拖動來改變元素大小，看看邊框背景是否跟著等比例縮放，用border-image是無法實現這個效果的。

總結

background應該算CSS里一個比較基礎的屬性，本篇更多的是給自己零散的知識點做一個總結。以后對background有什么新的發現都可以往這篇里增加，這就像一顆種子，假以時日終會長成一顆小樹苗。