今天公司的要做一個名叫夢幻戀舞的webapp，在設定背景圖的時候，明明已經把整個區域的高寬設定成100%了，但是背景圖總不能全覆蓋整個網頁。考慮使用background-size這個屬性，在用的時候發現background-size還有好多值，這邊特地找一下學習一下。

1、length，percentage，根據給定長度值或者百分比來調整背景圖片大小。auto為預設值，這三個值最小可重複一次，最大重複兩次。對於這些值有以下解釋：
第一個值為設定圖片寬度，第二個值為圖片的高度；但是不管是用什麼值，都不能為負值
假如只給定一個值，那麼第二個自動的為 'auto'；
假如指定為percentage百分比值，那麼背景圖大小是根據相對的背景區域來做調整，這個背景區域是由background-origin來來決定的。這在上面已經有提到過了關於圖片原點的討論。這裡有必要提到 假如background-attachment:fixed，那麼其背景相對區域就是初始包含塊也就是視窗。

/* 一個值: 這個值指定圖片的寬度，那麼第二個值為auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px

/* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，請用逗號隔開，在CSS語法中凡語法後跟*或者#，都是可以無限重複的，但是必須用逗號隔開。 */
background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit
 

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖片的寬高為440*440，而元素相對區域高度為50*/ 
    background-size:contain;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度為50*/ 
    background-size:contain;
}

2、cover，按比例調整背景圖片，這個屬性值跟contain正好相反，背景圖片會按照比如自適應鋪滿整個背景區域。假如背景區域不足以包含背景圖片的話，那麼背景圖片就會被咔嚓。

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖片的寬高為440*440，而元素相對區域高度為50*/ 
    background-size:cover;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度為50*/ 
    background-size:cover;
}

說說背景圖片計算值

假如說只是拿單一的數值或者具體數值來解釋那理解起來應該不難，但假如用混合長度來說，可能會有點一下子明白不上來。

規範給了幾個例子，不妨拿出來一下：先宣告，所以的元素尺寸為 100*100

100% 100%背景圖片將鋪滿整個內容區，假如說元素有固有寬高，那麼背景圖片鋪滿整個100*100背景區域

div {
    background-image: url(plasma.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box }
背景圖片調整為寬度為50*50，但是背景圖片的原點位置為邊框box而不是padding-box
p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border-box }
背景圖片尺寸調整為15*15
para {
    background-size: 15px 15px;
    background-image: url(tile.png)}
這是預設值，也就是auto auto，此時背景圖片的尺寸將會是跟圖片的固有尺寸一樣.

body {
    background-size: auto;            /* 預設值 */
    background-image: url(flower.png) }
假如兩個都是百分比，此時圖片就會根據背景區域來按照寬高比自適應，此處背景圖片為20*30，但是因為背景重複用了 'round'迴圈，因此背景區域高度劃分了3個33.3等高區域，所以背景圖片會自適應調整為20*33.3
p {
    background-image: url(chain.png);
    background-repeat: no-repeat round;
    background-size: 20% 30% }

應用場景

目前用到background-size的場景都是基於webapp的背景圖上，大致的情況是，比如說最常見的logo作為某個元素的背景，但logo很複雜，假如說我們按照設計圖上的去切片的話，那會有兩種可能：
1、按照csser的解析度去切片，比如高度為50px，logo被直接縮放到50px那就會很彆扭，而且估計那那畫面太美，你都不敢看；
2、按照射擊溼設計的解析度去切的話，有可能設計圖的logo尺寸會很大，但是我們csser寫的時候高度只有50px，那logo就會顯示不全；

這時候background-size就發揮其重要的作用了，我們可以通過對背景圖片大小的自適應縮放，而不會影響到起美觀性又能全部顯示我們所需要的效果。