css中background系列详解
研究了background相关的属性，虽然很简单，但有些还是不知道，整理出来系统的学习一下，也会更好的掌握这些知识点（细节决定成败，哈哈）
background相关的属性有（把比较常用的放在前面不做过多的解释）：background、background-color、background-image、background-repeat、background-attachment、background-origin、background-blend-mode、background-clip、background-position、background-size、background-position-x、background-position-y
background 简写属性在一个声明中设置所有的背景属性。所有浏览器都支持该属性
可以设置的值有：
- background-color：设置元素的背景颜色
- background-position：设置背景图像的起始位置
- background-size：设置背景图像的尺寸
- background-repeat：设置是否及如何重复背景图像
- background-origin：background-position 属性相对于什么位置来定位。
- background-clip：规定背景的绘制区域
- background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
- background-image：为元素设置背景图像
- background-blend-mode
- background-position-x、background-position-y
如果不设置其中的某个值，也不会出问题，顺序也无所谓先后。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。（IE8 以及更早的浏览器不支持一个元素多个背景图像。IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。），看个在线的例子：试一试
background-color和background-image，就不在这里详细的说了，毕竟经常用，都知道吧（注意:background-color没有inherit值）
可以设置多张图片作为背景（IE8 以及更早的浏览器不支持一个元素多个背景图像。）
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
background-repeat：repeat（默认值）|repeat-y|repeat-x|no-repeat|inherit（IE不支持该值）（所有浏览器都支持该属性）
background-attachment：scroll（默认值）|fixed|inherit（IE不支持该值）（所有浏览器都支持该属性）background-position:0% 0%（默认值）【两个值，可以是方向（left、top、bottom、center、right）的设置，也可以是百分比的形式，还可以是像素大小的设置，如果只设置一个值，那么第二个默认为center（50%）】，例：left top|top（类似于top center）|20% 20%|40px 40px|40px（类似于40px 50%）。也可以是inherit（但IE不支持该值）
嗯、主要讲讲下面的
background-size
background-size:length|percentage|cover|contain;
- length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
- percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-size:80px 60px;
background-size:80% 60%;
background-size:cover;
background-size:contain;div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}兼容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
background-origin:
规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
background-origin: padding-box|border-box|content-box;
- padding-box:背景图像相对于内边距框来定位
- border-box：背景图像相对于边框盒来定位
- content-box：背景图像相对于内容框来定位
background-clip:padding-box|border-box|content-box;
兼容性：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
下面的不常用，但还是蛮有意思的
background-blend-mode :
background-blend-mode :blend，混合的意思喽，我的理解就是把两种（及以上）的背景进行混合
可以是两个图像背景，也可以是一个颜色和一个图像的背景（但我们知道颜色最多只能有一个了），看下面的写法
background:url("../img/img2.jpg"),url("../img/img.jpg") ; background-blend-mode: exclusion ; }background:url("../img/img2.jpg"),#ef3239 ; background-blend-mode: exclusion ; }混合模式应该按background-image CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。
background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light
| soft-light | difference | exclusion | hue | saturation | color | luminosity
/* 单值 */
background-blend-mode: normal;
/* 双值，每个背景一个值 */
background-blend-mode: darken, luminosity;
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;兼容性：这个兼容性不太好，IE下不支持。其他浏览器也要高版本的才支持
| 属性 | Chrome | IE | Firefox | Safire | Opera |
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 不支持 | 30.0 | 7.1 | 22.0 |
background-position-x和background-position-y
background-position-x : length | left | center | rightbackground-position-y : length | left | center | right
取值：
length ：百分数 | 由浮点数字和单位标识符组成的长度值
left ：居左
center：居中
right ：居右
兼容性：
chrome和IE支持，写法：
background-position-x:30px;-ms-background-position-x:30px;
background-position-y:30px;-ms-background-position-y:30px;
firefox不支持这两个属性，如果要兼容，需要写成：
background-position:30px 30px;
参考：http://www.w3school.com.cn/cssref/pr_background.asp