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：缩放图像的最大值，其宽度和高度都能放入内容区域

效果如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

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