[HTML]background-size可以縮放大小

轉自:http://www.igooda.cn/jsdt/20130827355.html

background-size需要兩個值，它的類型可以是像素（px）、百分比（%）或是auto，還可以是cover和contain。第一個值為背景圖的width，另外一個值用於指定背景圖上的height，如果只設定1個值，則第2個默認為auto，但當值為cover和contain時除外。

cover：保持圖像的寬高比例，將圖片縮放到正好完全覆蓋定義的背景區域，其中有一邊和背景相同。

html:

<div class="div" ><h1>雨打浮萍</h1><p>專注於web前端開發</p></div>

css:

.div{
	width:160px;
	height:120px;
	border:1px solid #ccc;
	padding:10px;
	background-image:url(bg.jpg);
	background-size:cover;
}

效果如下：

contain：保持圖像的寬高比例，將圖片縮放到寬或者高正好適應定義背景的區域，但背景仍在定義的區域之內，被包含。

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

顯示效果：

這里為背景圖片設置寬高，圖片會直接被拉伸或縮放，不保持原來的比例。如果只設置一個數值，另外一個值默認為auto，它將按圖片原比例來伸縮。

percentage

.div{
	background-size:40% 60%;
}

這里需要特別注意一下，圖片大小不是按背景圖片大小的百分數來計算的，而是裝載背景圖的元素的百分比來計算。

瀏覽器的兼容性

支持瀏覽器：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;

注意：雖然我上面寫到了各瀏覽器需要添加自己獨特的方式，但並不代表這個樣式一定要添加，在我寫的事例中並沒有為各瀏覽寫自己的樣式，仍然執行很好。