CSS3 background新增属性用法

1. background属性列表
    background-color
    background-position
    background-size
    background-repeat
    background-origin
    background-clip
    background-attachment
    background-image

background缩写属性的顺序
background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

2,css3新增的backgroud-size用法

    background-size: 200px;
    background-size: 200px 100px;
    background-size: 200px 100px, 400px 200px;//有多个图像
    background-size: auto 200px;
    background-size: 50% 25%;
    background-size: contain;
    background-size: cover;

    使用<length>|<percentage>时，第一个值是指背景图像的width，第二个指背景图像的height，如果只有一个值，height就为auto
    使用percentage注意：width和height是针对于背景区域，不是背景图像大小

3,css3新增的background-origin用法

background-origin是用来决定图片的原始起始位置。它有三个可选值content-box,padding- box,border-box(background-origin
如果写在css中只有Opera浏览器可以识别，如果希望在火狐或者chrome或 Safari中使用，
要使用它们浏览器的私有属性-moz-background-origin(Firefox),-webkit-background-origin(chrome,safari)，
并且对应的值是content,padding,border,省略了-box)，即你可以选择背景图片是从内容区域开始显示，还是内边距，还是边框

如果背景不是no-repeat的话，这个属性是无效的

4,css3新增的background-clip用法

ackground-clip与origin的可选择一样，也是有content- box,padding-box,border-box
(要注意在火狐和Chrome和Safari中，需要使用私有属性，加上-mox-和 -webkit-,这里就不赘述了，
参考解释background-clip的内容)。怎样个剪裁法呢。根据你设置的盒子部位，
那么图片在这个部位的外边缘以外的部分都会不可见。举个具体例子，
图片起始位置和上面的例子一样，比如是从border-box开始，但我background-clip设置的值是
content-box，在content之外，也就是border-box内，padding-box内的图片内容统统不可见。