项目总结设置元素的多个背景图和background的运用

其实我们在项目中经常遇到这种场景一个元素或者一行会有多个图标展示，之前我的做法就是每个图标用 span标签然后给它加一个背景或者是直接用img标签加载。不过css3新出了这样一个功能，就是一个元素可以设置多个背景图，而且可以分别给每个背景图设置大小和位置，这样的话就可以在一个元素里面设置任意位置，任意大小的背景图（有点夸张了）。
好了，前期介绍完了，开始用代码说话了

background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image    
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/40px 40px; 

#ff0000 : background-color 背景色
url(/i/eg_bg_03.gif) : background-image 背景图
no-repeat : background-repeat 背景图是否重复
fixed : background-attachment 背景图像是否固定或者随着页面的其余部分滚动
center : background-position 背景图的位置
40px 40px : background-size 背景图的大小

这是设置一个背景图的写法，其中要特别注意的是background-position和background-size 的写法，这两个要在background中都写的话一定要写到一块中间一定要加 ‘/’，不然的话就会报错（Invalid property value），说这个background属性无效。其他属性都常见，background-attachment估计用到的倒不是很多。
那么就来看一下background三个不常用的属性

1 background-origin 规定 background-position 属性相对于什么位置来定位。（如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。）
background-origin: padding-box|border-box|content-box;
border-box 背景图像相对于边框盒来定位。
padding-box 背景图像相对于内边距框来定位。
content-box 背景图像相对于内容框来定位。

2 background-clip 规定背景的绘制区域
background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

3 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置

以上是对background的属性了解，其中重点是background-position和background-size在一块写时的表示方法，以及三个不常用到的属性的了解，具体事例可以下去联系的时候好好写几个demo看一下效果。

麻鸭，忘了这次总结的重点了，多个背景图的设置，开始=>action

background: url(…/assets/image1.png) no-repeat 0 center/43px,
url(…/assets/image2.png) no-repeat center right/12px,
#fff;

上面的background包括两个背景图imgage1和image2，可以单独设置每个图片的重复性（background-repeat） 所处位置（background-position） 图片的大小（background-size），背景色单独设置 #fff（background-color）
注意！（这是重点）写的时候一定要特别注意，每个背景图的设置之间一定要加‘，’，一定要加‘，’，不然会报错 （Invalid property value），背景图和背景色之间也要加‘，’，可以把每个背景图和这个背景图的相关设置看做是一个单独的属性，每个背景图和最后设置的背景色是并列的关系。（背景色的设置一定要放到最后，不然也会报错，记住一定放在后面） background: #fff,url(…/assets/image1.png) no-repeat 0 center/43px,
url(…/assets/image2.png) no-repeat center right/12px; 记住这样写会报错
注意: background-color 只能在background的最后一个属性上定义，因为整个元素只有一种背景颜色。
其实要想对background的各种属性都想详尽的了解，看MDN文档就足够了，
MDN–background的链接
background用处不小，用好了能实现各种炫酷的效果。
那我们分别来看一下background中的各个属性吧(介绍的顺序)
<attachment>
参见 background-attachment
<box>
参见 background-clip 和 background-origin
<background-color>
参见 background-color
<bg-image>
参见background-image
<position>
参见 background-position
<repeat-style>
参见 background-repeat
<bg-size>
参见 background-size
以上都是各个属性的MDN链接