background

background：[ <bg-layer>, ]* <final-bg-layer>

<bg-layer> = [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}

<final-bg-layer> = [ background-color ] || [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

[ background-color ]：

指定对象的背景颜色。

[ background-image ]：

指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”

[ background-repeat ]：

指定对象的背景图像如何铺排填充。

[ background-attachment ]：

指定对象的背景图像是随对象内容滚动还是固定的。

[ background-position ]：

指定对象的背景图像位置。

[ background-origin ]：

指定对象的背景图像显示的原点。

[ background-clip ]：

指定对象的背景图像向外裁剪的区域。

[ background-size ]：

指定对象的背景图像的尺寸大小。

• 一个元素可以设置多重背景图像。
• 每组属性间使用逗号分隔。
• 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
• 示例：假设要在同一个元素上定义3个背景图像

  缩写方式：

  background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
  	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
  	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

  注意，background-color只能设置一次，且由于写在前面的背景会叠在之后的背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。

  拆分方式：

  background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-attachment:scroll,scroll,scroll;
  background-position:10px 20px,10px 20px,10px 20px;
  background-size:50px 60px,70px 90px,110px 130px;
  background-origin:content-box,content-box,content-box;
  background-clip:padding-box,padding-box,padding-box;
  background-color:#aaa;

• 如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：

  缩写方式：

  background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
  background-repeat:no-repeat;
  background-attachment:scroll;
  background-position:10px 20px;
  background-size:50px 60px,70px 90px,110px 130px;
  background-origin:content-box;
  background-clip:padding-box;
  background-color:#aaa;

  如果定义了多个背景图片，而[ background-origin ]和[ background-clip ]设置了相同的值。可这样缩写：

  缩写方式：

  background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
  	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
  	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

  这表示[ background-origin ]和[ background-clip ]都使用了padding-box参数值。

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

1. 不支持：多组背景图像。
2. 不支持：[ background-size ] 写入缩写方式。
3. 不支持：[ background-origin ] || [ background-clip ] 写入缩写方式。