background-size需要兩個(gè)值，它的類(lèi)型可以是像素（px）、百分比（%）或是auto，還可以是cover和contain。第一個(gè)值為背景圖的width，另外一個(gè)值用于指定背景圖上的height，如果只設(shè)定1個(gè)值，則第2個(gè)默認(rèn)為auto，但當(dāng)值為cover和contain時(shí)除外。
cover：保持圖像的寬高比例，將圖片縮放到正好完全覆蓋定義的背景區(qū)域，其中有一邊和背景相同。
html:
<div class="div" ><h1>雨打浮萍</h1><p>專(zhuān)注于web前端開(kāi)發(fā)</p></div>
css:
.div{
width:160px;
height:120px;
border:1px solid #ccc;
padding:10px;
background-image:url(bg.jpg);
background-size:cover;
}
效果如下：
contain：保持圖像的寬高比例，將圖片縮放到寬或者高正好適應(yīng)定義背景的區(qū)域，但背景仍在定義的區(qū)域之內(nèi)，被包含。
css:
.div{
width:160px;
height:120px;
border:1px solid #ccc;
padding:10px;
background:url(bg.jpg) no-repeat;
background-size:contain;
font-family:Microsoft Yahei;
}
length
.div{
background-size:150px 80px;
}
顯示效果：
這里為背景圖片設(shè)置寬高，圖片會(huì)直接被拉伸或縮放，不保持原來(lái)的比例。如果只設(shè)置一個(gè)數(shù)值，另外一個(gè)值默認(rèn)為auto，它將按圖片原比例來(lái)伸縮。
percentage
.div{
background-size:40% 60%;
}
這里需要特別注意一下，圖片大小不是按背景圖片大小的百分?jǐn)?shù)來(lái)計(jì)算的，而是裝載背景圖的元素的百分比來(lái)計(jì)算。
瀏覽器的兼容性
支持瀏覽器：IE(9)、firefox、Chrome、Opera、Safari。
/*Mozilla*/ -moz-background-size:auto||<length>||<percentage>||cover||contain; /*Webkit*/ -webkit-background-size:auto||<length>||<percentage>||cover||contain; /*Presto*/ -o-background-size:auto||<length>||<percentage>||cover||contain; /*W3c*/ background-size:auto||<length>||<percentage>||cover||contain;
注意：雖然我上面寫(xiě)到了各瀏覽器需要添加自己獨(dú)特的方式，但并不代表這個(gè)樣式一定要添加，在我寫(xiě)的事例中并沒(méi)有為各瀏覽寫(xiě)自己的樣式，仍然執(zhí)行很好。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。