background-size中，100%和cover都是用於將圖片擴大或者縮放來適應整個容器。

1、引數：

    background-size：contain; // 縮小圖片來適應元素的尺寸（保持畫素的長寬比）；
    background-size ：cover; // 擴充套件圖片來填滿元素（保持畫素的長寬比）；
    background-size ：100px 100px; // 調整圖片到指定大小；
    background-size ：50% 100%; // 調整圖片到指定大小，百分比相對於包含元素的尺寸。

2、瀏覽器相容寫法：

    IE 和遨遊不支援；
    Firefox 新增私有屬性 -moz-background-size 支援；
    Safari 和 Chrome 新增私有屬性 -webkit-background-size 支援；
    Opera 不支援 background-size 屬性，新增其私有屬性 -o-background-size 也不支援。

3、屬性詳解：
 

background-size：100% 100%;---按容器比例撐滿，圖片變形；

background-size：cover;---把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是要注意，超出容器的部分可能會裁掉。

當為百分比的時候，100%和100%，100%也會顯示不一樣的效果：

background-size:這個屬性有兩個值，第一個值為x軸方向的縮放比例或者px,第二個值為y軸方向的縮放比例或者px，如果只寫一個值，則第二個值預設為auto(根據圖片原來的比例，以及現有的寬度，來確定高度)
比方說：你有一張長寬比例為4:3的圖片，有一個width:100px;height:50px;的盒子(也就是長寬比例為2:1)。
background-size:100% 100%;這種方式設定完背景圖片的大小後，會完全鋪滿整個盒子，並且背景圖片的比例會因此改變為2:1
background-size:100%;這種方式設定的背景圖片的大小,x軸會和盒子一樣的寬，但是y軸由於預設為auto，根據上面的理論計算得背景圖片的高度為300px,但是盒子只有50px高，超出的部分隱藏，所以看兩種寫法的效果自然就不一樣啦。
第一種效果你一定會看到完整的背景圖片，但是有可能被擠壓(失去圖片原來的比例)
第二種效果你不一定能看到完整的圖片，但是圖片的比例沒有發生變化。

4、親自試一試效果：