background是一个很重要的css属性，在css3中新增了很多内容。一方面是原有属性新增了属性值，另一方面就是新增了3个属性。
css2的background有5个属性，缩写如下：
background:background-color,background-image,background-repeat ,background-attachment, background-position;
其中background-image,background-repeat和background-position在css3中都增加了新的属性值。
css3中background-image可以设置多个背景图片，用法：background-image:url(),url()。
对于多重背景图需要注意以下几点：
背景图以层的形式显示，多个背景图从上往下分布，第一个背景图在最顶层，所以添加多个背景图需要注意顺序以及图片透明度。
举例：
两个div的背景图一样，顺序相反。
<style>div{ width: 200px; height: 200px; border: 5px dotted pink; background-repeat: no-repeat; display: inline-block;}.bg{ background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif);}.bg2{ background-image: url(img/bg_flower_2.gif),url(img/bg_flower.gif);}</style></head><body><p>两张背景图：尺寸一样，第一张透明，第二张不透明<p><img src="img/bg_flower.gif"/><img src="img/bg_flower_2.gif" /><div class="bg"></div><div class="bg2"></div></body>View Code
分析：因为背景图以层的形式显示，第一个添加的在最上层。所以上左图中第一个背景图在上且透明就可以产生很漂亮的重叠效果，第二个因为不透明的背景图在上就覆盖了第二个图片，所以看不到下面的图片。
这点和box-shadow很相似。一个box有多重阴影时，多个阴影从上往下分布，第一个阴影在最顶层。了解更多可参考《css3 box-shadow》
用'，'隔开每组background的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
Note:缩写时必须把background-color设置在最底层，才能生效。如果将background-color添加到其他层，语法错误整个规则都被忽略，不会显示。
举例：
<style>div{ width: 200px; height: 200px; border: 5px dotted pink; display: inline-block;}.bg3{ background: url(img/bg_flower.gif) no-repeat,url(img/bg_flower_2.gif) no-repeat blue;}.bg4{ background: url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif) no-repeat blue;}</style></head><body><p>两张背景图：尺寸一样，第一张透明，第二张不透明<p><img src="img/bg_flower.gif"/><img src="img/bg_flower_2.gif" /><div class="bg3"></div><div class="bg42"></div></body>View Code
分析：上图左一，background-color写在最底层，生效。左二中，给第一层加了一个background-color:yellow;整个规则无效。
或者将缩写拆分开写：如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值；同样background-color只能设置一个。
background-image:url1,url2,...,urlN;background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;
渐变用法是这样：background-image:linear-gradient(...);可见渐变是背景图的一种特例，即用代码生成了一张背景图。了解更多渐变可参考《css3 Gradient背景》
既然渐变也是背景图，在多重背景的时候当然可以用了。
.bg5{ background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;}<div class="bg5"></div>
总体来说，css3中新增的多重背景图，选择好的图片，使用得当可以出奇制胜，达到意想不到的效果。
对应背景图的平铺，必须说明一点：默认情况，背景图在x轴和y轴平铺，尽管起始于padding-box左上角，但是其各个方向朝外平铺，延伸到border区域。这点很重要，在下面background-origin时也要说到。
css3中，可以使用两个repeat代替一个值。第一个为x轴，第二个为y轴。比如background-repeat: repeat no-repeat;和background-repeat: repeat-x;等价。
css2中背景图的重复方式只有repeat，repeat效果就像贴瓷砖一样，如果不能整数个整好放置，超出部分就被裁剪掉了。css3新增了space和round属性值，在repeat基础上对重复的过程做到更好的把控，尽善尽美。
将背景图在水平和垂直方向平铺且不裁剪。两端对齐，中间填补空白，背景图大小不变。
将背景图在水平和垂直方向平铺且不裁剪。但是背景图片可能被拉伸或缩短。
repeat，space和round对比举例：
本来想找个合适的小点的图片，没找到，那就拿文章后面资源链接里一个背景图来举例好了。
原作者的例子在这里。
就是这只羊，原图信息：
好大一只羊，我在做demo时设置了background-size:100px 100px，这个属性后面会介绍。
代码：
<style>div{ width: 240px; height: 240px; border: 1px solid pink; display: inline-block; background-image: url(img/sheep.png); background-size: 100px 100px; background-color: green; color: red;}.repeat{ background-repeat: repeat;}.space{ background-repeat: space;}.round{ background-repeat: round;}.round1{ background-repeat: round; width:250px;}</style><body> <div class="repeat">repeat</div> <div class="space">space</div> <div class="round">round四舍</div> <div class="round1">round五入</div></body>效果：
分析：
首先，我设定div的尺寸为240px*24px,img的尺寸为100px*100px。
repeat的情况，背景图从左上角开始沿着x轴和y轴平铺，背景图大小不变，多余被裁剪，如上图左1。
space的情况，240/100=2.4，放不下3个图，因为space不裁剪，所以向下取整为2，所以x和y轴都有2张背景图，且两端对齐，其余空间空白，如上图左2。
round的情况，round这个词很有意思，它有四舍五入的意思。round(240/100)=round(2.4)=2，所以就容纳2张图片，图片尺寸放大，如上图右2。
如果设定div宽度为250，round(250/100)=round(2.5)=3，所以就容纳3张图片，图片被缩小，如上图右1。
css2中背景只能从左上角定位，css3的background-position增加到四个属性值，可以对四个角都进行定位，而且可以取负值。
background-position取值的关键字有：top left center right bottom
按照取值个数举例来说一下：
background-position: top;仅给定一个值，那么第二个值将是"center"。
注意一个问题：给一个值，并不一定是设置background-position-x,要根据参数定。left center right自然是设置x轴，top center bottom是对应y轴。
background-position:x% y%|x pos y pos|center center。
第一个设置x轴偏移，第二个设置y轴偏移，没什么好说的。
Note:设置3个或4个参数值时，偏移量前面必须有关键字。就是说形如："10px bottom 20px" ，是错误的，因为10px前面没有关键字。
MDN上background-position: 0px 0px, center;这样的写法显然是错误的。
background-position: right 10px top;设置，水平靠右10px，垂直top。
background-position:right 10px bottom 10px;设置靠右下角水平垂直10px定位。
css3中background新增了3个属性:background-origin,background-clip和background-size。
background-origin用来指定背景图片定位在哪个盒子中。
个人观点：background-origin是background-position的特例。都是表示背景图放哪，background-origin特殊点，决定背景图定位在哪个盒子中，相当于快速定位，你可以先通过background-origin定位到盒子，再通过background-position进行微调。
语法：
background-origin ： border-box | padding-box | content-box;
默认值：padding-box；
设置背景图片原始起点位置，没什么好说的，只是有几点需要注意：
如果背景不是no-repeat，这个属性无效，它会从边框开始显示。这句话是慕课网总结的，我得吐槽一下，背景repeat这个属性是还是有效的。请看下面例子。
<style type="text/css">div{ color: white; width: 100px; height: 100px; border: 20px dotted pink; padding:50px; background-color: yellow; background-image: url(img/wl.jpg) ; display: inline-block; vertical-align: top;}.origin-content{ background-origin: content-box;}.nopeat{ background-repeat: no-repeat;}</style><body><div></div><div class="origin-content nopeat">origin-content nopeat</div><div class="origin-content">origin-content</div></body>新闻热点
疑难解答
