快速解读! CSS雪碧图

CSS雪碧图(CSS SCRITE)

雪碧图即CSS Sprite（精灵）是一种是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用css的背景定位来显示需要显示的图片部分，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

HTML部分

 <div class='bg boxa'></div>
 <div class='bg boxb'></div>

CSS部分

    .bg{
        background:url('xxx.jpg');
    }
    .boxa{
        background-position:0% 0%;
    }
    .boxb{
        background-position:100% 100%;
    }

优点

1.减少加载网页图片时对服务器的请求次数

原因是我们在使用雪碧图之后，本来需要多次请求的图片，我们可以一次请求过来，然后使用background-position减少了该页面向服务器请求的次数，间接地优化了该页面的性能

2.提高页面的加载速度

3.减少鼠标滑过的一些bug

缺点

1.CSS 雪碧图在维护的时候比较麻烦

2.雪碧图的制作较麻烦

3.背景大小，容易出现断裂