background-size

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值：auto

适用于：所有元素

继承性：无

动画性：是，除非使用值为关键字

计算值：指定值

媒　体：视觉

<length>：

用长度值指定背景图像大小。不允许负值。

<percentage>：

用百分比指定背景图像大小。不允许负值。

auto：

背景图像的真实大小。

cover：

将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：

将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

• 该属性接受1~2个参数值（cover和contain关键字只接受一个）。如果提供两个，第一个用于定义背景图像宽度，第二个定义高度；只提供一个，该值用于定义背景图像的宽度，高度将依据图像宽度定义进行等比缩放计算得到。

• 当属性值为百分比时，参照背景图像的background-origin区域大小进行换算（而不是包含块大小）。

  百分比参照计算：

  .demo {
  	width: 200px;
  	height: 200px;
  	padding: 20px;
  	background-image: url(test.jpg);
  	background-repeat: no-repeat;
  	background-size: 50% 50%;
  }

  因为background-origin的默认值为padding-box（即包含padding），所以此时，背景图像的计算值为：120px 120px

  改变background-origin的取值：

  .demo {
  	background-origin: content-box;
  }

  由于将background-origin设置为了content-box（即内容区域），所以此时，背景图像的计算值为：100px 100px

• 对应的脚本特性为：backgroundSize。

• 浅绿 = 支持
• 红色 = 不支持
• 粉色 = 部分支持