背景大小
設定背景圖片的大小，以長度值或百分比顯示，也可以透過cover和contain來伸縮圖片。
background-size屬性用法詳解:
Background-size屬性具有兩個參數（在這裡先不把cover和contain計算在內），參數值既可以是精確數值形式也可以是百分比形式，也可以是預設的值auto，例如:
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;
下面對Background-size屬性的參數做一個簡單的介紹:
如果只有一個參數，那麼此值用來規定背景圖片的寬度，這個時候背景圖片的高度值是按照寬度進行等比例縮放。
如果提供兩個參數，那麼第一個參數用來規定背景圖片的寬度，第二個參數用來規定背景圖片的高度。
程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px 100px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>Background-size屬性帶有兩個參數，第一個參數規定背景圖片的寬度為200px，第二個參數規定背景圖片的高度為100px。
再看一段程式碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.first{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:200px;
background-repeat:no-repeat;
}
.second{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:600px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="first"></li>
<li class="second"></li>
</ul>
</body>
</html>以上程式碼中，Background-size屬性之規定了一個參數，那麼這個參數用來規定背景圖片的寬度，背景圖片的高度根據寬度值進行等比例縮放，如果背景圖片的尺寸超過容器，將會被裁切。
Background-size屬性值如果是auto的時候，就是背景圖片按照原始尺寸顯示，這裡就不用實例示範了。
下面再來介紹一下此屬性的cover和contain屬性值。
一.cover屬性:
將屬性值設為cover之後，將背景映像等比縮放到完全覆蓋容器，背景映像有可能超出容器，不過超出的部分將會被裁切。
cover的英文也有涵蓋的意思，說這一點就是有助於大家的記憶和理解。
程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>在上述程式碼中，背景圖片可以最小程度的完全覆蓋容器，如果背景圖片的和容器的長寬比例不一樣，那麼必然會出現在橫向或縱向上超出容器的情況，那麼超出的將會被隱藏。
一.contain屬性:
此屬性值可以將背景圖片放大或縮小。
和cover屬性類似，都是可以將圖片等比例放大或者縮小，但是cover是最小限度的將容器的覆蓋，而contain只是要求某一個方位上將容器覆蓋，比如縱向或者橫向能夠最小程度將容器覆蓋。
程式碼範例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
width:450px;
height:300px;
border:5px solid green;
list-style:none;
margin-top:10px;
}
.test{
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-size:contain;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li class="test"></li>
</ul>
</body>
</html>在上述程式碼中，背景圖片進行了等比例縮放，由於在縱向上能夠最先達到填充容器元素，所以在橫向上就放棄嘗試。
