css基础知识（1）———— background
1. 写了几年的页面经常会把一些不常用的css 属性方法给丢掉了，必须抽时间回顾下。
1) background-image:url(); 关于背景图片，可以是一张也可以是多张共同存在的背景图
demo:
html: <div class="main"></div>
css:
A) 图片共存
.main{
width:400px;
height:400px;
background:
url(//m.elongstatic.com/frontend/activepage/spring/main/images/icon1.png) no-repeat,
//一定要用逗号隔开
url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat;
}
B)图片覆盖
.main{
width:400px;
height:400px;
background:
url(//m.elongstatic.com/frontend/activepage/spring/main/images/icon1.png), //一定要用逗号隔开
url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png);
}
C) 一个页面两张背景图
.main{
width:400px;
height:400px;
background:
url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat ,
2）关于background-position
background-position:0 0; 第一个值代表水平方向的偏移值，第二个值代表垂直方向的偏移值
3) background-size 图片尺寸大小
可以是百分比，值或者cover,contain等,第一个值代表宽度第二个值代表高度
background-size: 100% auto | background-size: 10px 10px; ｜ background-size: cover | background-size: contain
background-size: inherit|initial|unset
background-size:cover 与 background-size:contain 区别就是
contain:把图片放大到图片本身最大，cover 拉伸覆盖到父级元素最大
.main{
width:300px;
height:300px;
border:1px solid #ddd;
background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat ;
background-size:contain;
}
.main{
width:300px;
height:300px;
border:1px solid #ddd;
background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat ;
background-size:cover;
}
4) background-repeat: repeat | no-repeat | repeat-x | repeat-y | round | space
这里重点写个round space
space:图像会尽可能重复，但不会被裁剪，第一个跟最后一个会被固定在元素边缘上，同时空白会均匀分布在元素中间
round:图像会被拉伸或者压缩 铺满整个父元素
.main{
border:1px solid #ddd;
background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) space space ;
}
.main{
width:800px;
height:300px;
border:1px solid #ddd;
background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) round round ;
}
5) background-origin 背景图片相对于什么位置来定位
background-orign: padding-box 背景图片以padding 位置为参考定位
background-origin: border-box 背景图片以border区域为参考定位
background-origin : content-box 背景图片以内容区域为参考定位
6) background-clip 设置元素背景是否延伸到父元素背景边框下面
background-clip:border-box 背景颜色或者图片延伸到边框外边缘
background-clip:padding-box 背景延伸到内边距外边缘，不会伸到边框下面
background-clip:content-box 背景延伸到内容的外边缘
7) background-attachment:scroll | fixed | local 设置固定背景图像，背景图像滚动机制
scroll: 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
fixed: 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制 区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
Demo: http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment