前端css background的应用
backgroun算是前端很常用的属性了，很多人并不会过多的具体了解它，大部分人都只会简单的应用！下面我就分享一下background的具体用法。
学习一个css属性，要先了解他的属性。
1.背景颜色：color
具体写法background-color：#ccc,也可以直接写成background:#ccc，这个主要用来定义背景的颜色，默认情况下，背景的颜色是包含内边距，边框，和内容的。也就是说如果你定义的不是实线的边框，边框下面是可以看到背景的（如图1），如果你想让背景颜色不覆盖边框，就要了解下一个取值了。
2. background-clip指定背景图像的绘画区域，背景颜色也同样有用
具体写法background-clip:border-box,这里的取值有三个，border-box（图1），包括内边距，边框，和内容的，也就是默认的；padding-box（图2），包括内容和内边距的；content-box（图3），背景绘制在内容方框内.
3.background-image背景图片，这个就是大家常用的
具体写法 background-image:url(‘paper.gif’),但是css3新增了多张背景图片的功能，可以写成这样，background-image:url(‘paper.gif’)，url(‘paper.gif’)中间用逗号隔开。
4.background-repeat 这个属性主要针对背景图片的
具体写法background-repeat:repeat-y（图4）和background-repeat:repeat-y repeat-x,第一个值表示水平方向，第二个值表示垂直方向,这里如果只写一个值另一个值默认会取no-repeat ;这里的取值主要有这么几个，repeat，如果图片比背景区域小，则重复显示铺满整个背景区域；repeat-x，水平区域重复；repeat-y，垂直区域重复；no-repeat，不重复；inherit，指定background-repea属性设置应该从父元素继承。
5.background-position 这个属性同样用于背景图片的，表的是背景图片的定位
具体写法background-position:center（如果仅指定一个关键字，其他值也将会是"center"）和background-position:left top（图5.）,同样的第一个表示的是水平方向，第二个表示的是垂直方向 ; 有三种类型的取值方式：首先，left,right,center,top,bottom,这些表示方位的写法，图片的定位和英文单词表示的意思是一样的。；其次，百分比写法，background-position:0% 0%，表示的意思和background-position:left top，代表水平方向0px,垂直方向0px的排序；最后一种写法，具体定位数值的写法，background-position:0px 0px，意思同样和前面的表示的意思一样。
6.background-size 属性指定背景图片大小
具体用法background-size:80px 60px，第一个值表示宽度，第二个值表示高度;具体的写法有，直接定值法，可以直接写上百分比（background-size:50% 50%—图6）或者是具体的px，如果第一个值写第二个值不行，则第二个值默认就是auto，auto意思就是第二个值默认按照第一个值原来的尺寸（图片本身的比例，比如图片本来是200*100，如果只写一个值background-size：100px,那么第二个值默认就是变成50px,也就是相当于background-size：100px 50px）等比变化的；cover，保持图片的纵横比，将图片扩大至覆盖整个背景区域的最小大小，也就是说如果是一个正方形的图片，覆盖一个长方形的背景区域，会按照长进行覆盖（图7）；contain，保持图片的纵横比，将图片扩大至覆盖整个背景区域的最大大小，和前面一个相反，它就会安装长方形背景区域的宽经行扩大覆盖整个区域，整个时候，长就会空出一块来（图8）。
7.background-attachment 属性指定背景图片定位是参照元素
具体用法background-attachment:fixed，有两个取值，一个是fixed，表示的固定在哪个位置，和定位有点像，参照的对象是浏览器窗口；还有一个就是scroll，这个也是默认的，也就是参照设置背景的元素，会随着元素的滚动而滚动。
8.background-origin 属性指定background-position属性的相对位置
具体用法background-origin:content-box;这个属性主要包含以下几个值：首先，padding-box（图9），背景图像填充框的相对位置；border-box（图10），背景图像边界框的相对位置；content-box（图11），背景图像的相对位置的内容框。这个属性比较少用，而且还会跟background-attachment发生冲突，如果background-attachment:fixed，设置了fixed，那么这个属性就失效了(说起来拗口，也看不懂是不是，看图一看就明白，图片别看错了哦)。
