雪碧图制作工具下载:
链接：https://pan.baidu.com/s/1zc2Vez5VMWwa2Ark21DElA
提取码：cojm
背景图片基础:
使用background-image来设置背景图片
语法: background-image:url(相对与css的路径)
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片
这样背景颜色将会作为背景图片的底色
般情况下设置背景图片时都会同时指定一个背景颜色(因为加载外部图片需要一定的时间.再图片加载出来之前.会先显示颜色)
背景图片默认是贴着元素的左，上角显示
缩写:
background(注意 如果没有指定其中的某个属性,则会采用默认值.比如用background只指定了背景图片.没有颜色 那么会使用默认的透明色覆盖掉前面单独设置的颜色)
通过该属性可以同时设置所有背景相关的样式
没有顺序的要求，谁在前谁在后都行,也没有数量的要求
雪碧图按钮例子(css-sprite)
用到的属性:
background-image:url();
background-position:0px 0px;/*坐标*/
通常如果给按钮的三个状态分别设置三张背景图片,在网速较慢的时候,切换状态时会出现闪烁的情况,那是因为
当hover被触发时，浏览器才去加载hover . png
当active被触发时，浏览器才去加载active. png
由于加载图片需要- 定的时间，所以在加载和显示过程会有-段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后在通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术(css-sprite)也就是常说的雪碧图
此方法的优点:
1.将多个图片整合为-张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2.将多个图片整合为一-张图片，减小了图片的总大小，提高请求的速度，增加了用户体验