CSS3 新增背景属性

旧标准已有的背景属性：

background-color
background-image
background-repeat
background-position
background-attachment
background: transparent; // 设置背景颜色透明

新增属性

① background-origin

该属性可以设置背景图像定位的原点，属性值如下：

padding-box		原点在内边距上左上角，默认值
border-box		原点在边框上左上角
content-box		原点在内容上左上角

② background-clip

该属性可以设置背景图像的显示区域，属性值如下：

border-box		显示在边框以及以内，默认值
padding-box		显示在内边距以及以内
content-box		显示在内容区域
text			指显示在文本上，chrome浏览器需要私有前缀

③ background-size

该属性可以设置背景图像的尺寸，属性值设置规则如下：

1. 设置两个长度，分别表示背景图像的宽度和高度
2. 设置一个长度，表示背景图像的宽度，高度根据比例自动计算
3. 关键字 contain 表示背景图像尺寸自动适配元素，优先保证背景图像显示完整
4. 关键字 cover 表示背景图像尺寸自动适配元素，优先保证元素上铺满该背景图，可能造成背景图像显示不完整。

<length>： 用长度值指定背景图像大小。不允许负值。 
<percentage>： 用百分比指定背景图像大小。不允许负值。 
auto： 背景图像的真实大小。 
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

background 复合属性

1. content-box/padding-box/border-box 这样的值在复合属性中设置一个，同时设置 origin 和 clip
   这样的值如果设置了两个，第一个是 origin 第二个是 clip
2. background-size 的值必须写在 position 的后面,使用 / 分隔

/* content-box 同时设置了 origin 和 clip */
background: url(../images/jd001.jpg) content-box;

/* origin的值是content-box， clip的值是padding-box */
background: url(../images/jd001.jpg) content-box padding-box;

/*  position 的值是 0 0， size 的值是 500px 100px */
background: url(../images/jd001.jpg) content-box padding-box 0 0/500px 100px;

background:bg-color bg-image  bg-repeat bg-attachment bg-position / bg-size bg-origin bg-clip

多背景图

background-color: #ccc;
background-image: url(../images/bg-tl.png), url(../images/bg-tr.png);
background-repeat: no-repeat;
background-position: left top, right top;

background: url(../images/bg-tl.png) no-repeat left top, 
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom,
            url(../images/bg05.jpg) center/cover;

如果位置重合，先写的背景图像会显示在上层！

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;