连写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置/尺寸
background：rgba() url() repeat-x fixed 20% 20%/100px 20px
下面三个属性单独填写：
background-origin ]：指定对象的背景图像显示的原点。
[ background-clip ]：指定对象的背景图像向外裁剪的区域。
[ background-size ]：指定对象的背景图像的尺寸大小。
具体介绍：
1）background-color 定义背景的颜色以及透明度 背景颜色始终填充到border以内的所有区域内（不含border），不受background-origin影响，后者只决定
background-image的参考原点！默认值：transparent（透明的） 改变透明度的写法： rgba(255,255,0,0.5)
- 2）background-image：url() 定义背景图片的地址
3）background-origin 定义背景图片的开始显示的参考原点 默认值：padding-box
- padding-box：从padding区域（含padding）开始显示背景图像。
- border-box：从border区域（含border）开始显示背景图像。
- content-box：从content区域开始显示背景图像。
- ps:入伙backgroud-repeat不设置no-repeat,由于平铺的关系，即使设置了content-box，padding和border区域仍然会有图像显示，所以注意要设置background-repeat：no-repeat
- background-origin:content-box
- background-origin:padding-box(默认参考)
-
- background-origin:border-box
- 4）background-repeat 定义背景图填充方式 默认repeat
取值：
- repeat-x：背景图像在横向上平铺
- repeat-y：背景图像在纵向上平铺
- repeat：背景图像在横向和纵向平铺
- no-repeat：背景图像不平铺
- round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
- space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
- 5）background-attachment :fixed（默认） || scroll || local
- fixed：背景图像相对于窗体固定。
- scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
- 6）background-position 相对于background-origin定义的参考区域来定位的！！与盒子的类型(box-sizing)无关 ;详见上一篇随笔
- 7) background-size 默认值auto
- <length>：用长度值指定背景图像大小。不允许负值。
- <percentage>：用百分比指定背景图像大小。不允许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
- 8） background-clip 定义裁剪背景图的区域
- padding-box：从padding区域（不含padding）开始向外裁剪背景。
- border-box：从border区域（不含border）开始向外裁剪背景。
- content-box：从content区域开始向外裁剪背景。
- text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果