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

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

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