BackgroundSize

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

  

原文地址:https://www.cnblogs.com/greenteaone/p/2659878.html