本文已参与「新人创作礼」活动，—起开启掘金创作之路。
背景
在CSS 中定义的背景效果:
background-color：背景颜色background-image：背景图像background-repeat：背景图像平铺background-attachment：背景图像固定方式background-position：背景图像在背景中的位置
而在CSS3中新增了几个新的背景属性，提供了更强大的背景元素控制。
background-image：背景图像background-size：背景图像的大小background-origin：背景图像的位置区域background-clip：背景绘制的范围
CSS 中的属性
background-color
background-color 设置元素的背景颜色
可设置的值：
具体的颜色名：如red、blue等十六进制的颜色名：如#ff0000、#FFFFFF等transparent：透明RGBRGBAHSLHSLA
background-image
background-image 设置元素的背景图像
语法：background-image: url('图片的路径') -- 路径可以是本地的也可以是网上的
多张图片的话可以使用,隔开
语法：background-image: url('图片的路径'),url('图片的路径')
background-repeat
background-repeat 设置元素背景图像在页面中呈水平或垂直方向平铺
可设置的值：
repeat：水平和垂直方向上平铺，默认no-repeat：不平铺repeat-x：在水平方向上平铺repeat-y：在垂直方向上平铺
background-position
background-position 设置背景图像在背景中的位置
可设置的值：
left top/center/bottom：左上/左中/左下(水平位置，垂直位置)right top/center/bottom：右上/右中/右下(水平位置，垂直位置)center top/center/bottom：中上/居中/中下(水平位置，垂直位置)x% y%：百分比 (水平位置，垂直位置)x y：具体值 (水平位置，垂直位置)
注意：如果只设置一个属性值，则另一个属性值默认为 center
background-attachment
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
可设置的值：
scroll：滚动，默认 (跟随页面)fixed：固定local：滚动 (跟随元素内容)
简写
background简写没有顺序要求
background：背景颜色 背景图片地址 背景是否平铺 背景图像滚动 背景图片位置
CSS3 新增的属性
全是IE8及以下不兼容
background-image
background-image 设置元素的背景图像
这里和CSS中的background-image几乎相同，只是把CSS中的url('')换成了url()，也就是url('')中的''可以不写了。
语法：background-image: url(图片的路径) -- 路径可以是本地的也可以是网上的
多张图片的话也可以使用,隔开
语法：background-image: url(图片的路径),url(图片的路径)
background-size
background-size 设置元素的背景图片的大小
可设置的值：
width height：具体值 (宽度，高度)width% height%：百分比 (宽度，高度)cover：等比例缩放，图片完全覆盖到整个盒子，有可能图片显示不完全contain：等比例缩放，当高或宽其中有一个与盒子的尺寸相等，就不再缩放了
注意：如果只设置一个属性值，则另一个属性值默认为 auto
background-origin
background-origin 设置背景图像的偏移量计算的原点
如果背景图像background-attachment是fixed固定的，那个这个属性没有任何效果
padding-box：背景图像相对于内边距定位，默认值border-box：背景图像相对于边框定位content-box：背景图像相对于内容区定位
background-clip
background-clip 设置背景的绘制区域
border-box：背景绘制在边框方框内，默认值padding-box：背景不会出现在边框，只出现在内容区和内边距content-box：背景只会出现在内容区
简写
background: 背景颜色 背景图片路径 背景是否平铺 位置/大小
注意：
background-size必须写在background-position的后面，并且使用/隔开background-position/background-sizebackground-origin与background-clip两个样式，orgin要在clip的前面
