background-size
設(shè)置背景圖片的大小，以長(zhǎng)度值或百分比顯示，還可以通過(guò)cover和contain來(lái)對(duì)圖片進(jìn)行伸縮。
background-size屬性用法詳解:
Background-size屬性具有兩個(gè)參數(shù)（在這里先不把cover和contain計(jì)算在內(nèi)），參數(shù)值既可以是精確數(shù)值形式也可以是百分比形式，也可以是默認(rèn)的值auto，例如:
background-size:200px 100px;
background-size:50% 50%;
background-size:auto;
下面對(duì)Background-size屬性的參數(shù)做一下簡(jiǎn)單的介紹:
如果只有一個(gè)參數(shù)，那么此值用來(lái)規(guī)定背景圖片的寬度，這個(gè)時(shí)候背景圖片的高度值是按照寬度進(jìn)行等比例縮放。
如果提供兩個(gè)參數(shù)，那么第一個(gè)參數(shù)用來(lái)規(guī)定背景圖片的寬度，第二個(gè)參數(shù)用來(lái)規(guī)定背景圖片的高度。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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屬性帶有兩個(gè)參數(shù)，第一個(gè)參數(shù)規(guī)定背景圖片的寬度為200px，第二個(gè)參數(shù)規(guī)定背景圖片的高度為100px。
再看一段代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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屬性之規(guī)定了一個(gè)參數(shù)，那么這個(gè)參數(shù)用來(lái)規(guī)定背景圖片的寬度，背景圖片的高度根據(jù)寬度值進(jìn)行等比例縮放，如果背景圖片的尺寸超過(guò)容器，將會(huì)被裁切。
Background-size屬性值如果是auto的時(shí)候，就是背景圖片按照原尺寸顯示，這里就不用實(shí)例演示了。
下面再來(lái)介紹一下此屬性的cover和contain屬性值。
一.cover屬性:
將屬性值設(shè)置為cover之后，將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器，不過(guò)超出的部分將會(huì)被裁切。
cover的英文也有覆蓋的意思，說(shuō)這一點(diǎn)就是有助于大家的記憶和理解。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>在以上代碼中，背景圖片可以最小程度的完全覆蓋容器，如果背景圖片的和容器的長(zhǎng)寬比例不一樣，那么必然會(huì)出現(xiàn)在橫向或者縱向上超出容器的情況，那么超出的將會(huì)被隱藏。
一.contain屬性:
此屬性值可以將背景圖片放大或者縮小。
和cover屬性類(lèi)似，都是可以將圖片等比例放大或者縮小，但是cover是最小限度的將容器的覆蓋，而contain只是要求某一個(gè)方位上將容器覆蓋，比如縱向或者橫向能夠最小程度將容器覆蓋。
代碼示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</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>在以上代碼中，背景圖片進(jìn)行了等比例縮放，由于在縱向上能夠最先達(dá)到填充容器元素，所以在橫向上就放棄嘗試。
