Background-Size

Background-Size:[ <length> | <percentage> | auto ]{1,2} | cover | contain

background-size指定背景大小，以象素或百分比顯示。當指定為百分比時，大小會由所在區域的寬度、高度，以及background-origin的位置決定。還可以通過cover和contain來對圖片進行伸縮。

background-size可以設置2個值，1個為必填，1個為可選。第1個值用於指定背景圖的width，第2個值用於指定背景圖的height。

如果只給background-size設置1個值，則第2個值默認為auto（cover和contain特定值除外）。

 

 

<length>：設置背景圖片的高度和寬度（單位：px）。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為“auto”,

               例如：background-size: 100px 200px;背景寬100px，高200px；

<percentage>：設置背景圖片的高度和寬度（單位：%）。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為“auto”

               例如：background-size: 100% 100%;背景充滿

cover: 縮放圖像的最小值，其寬度和高度都能放入內容區域

contain：縮放圖像的最大值，其寬度和高度都能放入內容區域

效果如下：

<style type="text/css">
	.test
	{
		border: 20px dotted red;
		height: 200px;
		width: 200px;
		margin: 16px;
		background: url("/Content/014.png");
		background-origin: padding-box;
		background-repeat: no-repeat;
		text-align: center;
		float: left;
	}
	div p
	{
		padding: 46px 10px;
	}
	#div1
	{
		background-size: 60px 60px;
	}
	#div2
	{
		background-size: 100% 50%;
	}
	
	#div3
	{
		background-size: cover;
	}
	#div4
	{
		background-size: contain;
	}
</style>
<div id="div1" class="test">
	<p>
		background-size: 60px 60px</p>
</div>
<div id="div2" class="test">
	<p>
		background-size: 100% 50%;
	</p>
</div>
<div id="div3" class="test">
	<p>
		background-size: cover; 縮放圖像的最小值，其寬度和高度都能放入內容區域
	</p>
</div>
<div id="div4" class="test">
	<p>
		background-size: contain; 縮放圖像的最大值，其寬度和高度都能放入內容區域
	</p>
</div>