CSS3新增背景属性

在CSS2的基础上CSS3新增了一些背景属性，大部分都是不兼容低版本ie浏览器的。

回顾CSS2的背景属性

1、background-image：背景图片
2、background-color：背景颜色
3、background-repeat：图片是否平铺
4、background-position：图片起始位置
5、background-attachment：设置背景图片是否固定或随页面滚动

CSS3新增背景属性

 background-size：设置图片尺寸，有三种方式

background-size: 500px 500px;   /*x y 水平垂直方向上的尺寸，px，百分比，auto..*/

background-size: cover;         /*保持宽高比例不变，占满盒子，但是不保证能看到全图*/

background-size: contain;       /*保持宽高比例不变，看清全图，但是不保证能占满盒子*/

background-origin：背景区域定位
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。存在三种情况 

background-origin: border-box;       /*从border开始展示图片*/

background-origin:content-box;       /*从盒子content部分展示图片*/

background-origin:padding-box;       /*从盒子padding部分展示图片*/

background-clip ：背景的绘制区域。同样存在三种情况

background-clip: border-box;         /*通常配合上面的background-origin: border-box;使用*/
      
background-clip: padding-box;        /*默认为padding-box*/

background-clip: content-box;         /*当padding较大时，只希望图片占满content，可以使用该属性*/