css雪碧技术的用法。

---恢复内容开始---

在目前前端开发阶段，页面会出现大量的小图片，服务器加载的时候比较吃力，怎么用 一种办法把图片都合并到一张图片上呢？这就用到了css雪碧技术。

雪碧技术是雪碧团队开发，也有人叫它css精灵，是一种css图像合并技术，该方法的原理是将小图片和背景图片合并到一张图片上，然后利用css的背景定位爱显示需要显示的图片部分。

1.css雪碧的优点：减少加载页面图片时对服务器的请求次数提高页面的加载速度减少鼠标滑过的一些bug。

2.不足点：css雪碧技术的最大问题是内存使用 。它影响浏览器的缩放功能   拼图维护的时候比较麻烦使css的编写变得更加困难，css雪碧调用的图片不能被打印。

现在使用 代码来更详细的介绍雪碧技术。

<div>
    <div></div>
</div>

这是简单的html的页面，在外层div就是我们的背景板，它里边的div就是要显示的图片大小，把背景图插入到最小的div里边  并调试背景图的位置，如下代码：

先给小div来个id  id="xiao".

#xiao{
    width:50px;
    height:50px;
    background: url("图片路径")no-repeat;
    background-position: 0 0 0 0;
}

当图片出现在我们的小div里的时候  就停止调试。

背景图片可以反复使用  效果杠杠滴。

---恢复内容结束---