對於這兩個屬性，官網是這樣解釋的：

讀了還是不懂，那麼看下面的例子：

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

當圖片恰好自適應鋪滿元素的寬度或者高度，那麼元素的會有空白處存在，也就是圖中紅色框框都顯示了空白。

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

當使用了cover這個值的時候，那麼正好就跟contain相反，其會正好覆蓋整個背景相對區域，但是背景圖片的某些部分就看不見。