CSS之雪碧图

雪碧图的应用很广泛，在很多的大型网站中，例如：京东、淘宝等，都存在着对雪碧图的应用，下面说一说雪碧图的定义及有哪些优点，我们又该如何使用雪碧图。

一、什么是雪碧图

雪碧图就是将很多张小图片整合成一张大图片，然后通过CSS中定位属性布局网页背景。

二、雪碧图的优点

当图片过多时，会增加http的请求，导致网站性能减低，也同样会增加用户端流量消耗。而雪碧图的应用恰恰解决了这个问题，应用雪碧图，就降低了图片的数量，从而减少http请求，减少用户端流量消耗，并提升了网页性能。

三、如何应用雪碧图

HTML部分

<div class="sprite_common sprite1"></div>
<div class="sprite_common sprite2"></div>

CSS部分

.sprite_common{
      width:20px;
      height:20px;/*自定义宽高*/
      background:url('图片地址') no-repeat;
}
.sprite1{
      background-position:-20px -10px;
     /*自定义*/
}
.sprite2{
      background-position:-20px -10px;
     /*自定义*/
}

看一下效果图（这是曾经写过的京东代码 ）

很好用使用又很简单的雪碧图，在适合的时候一定要多想一想，这里是不是可以应用雪碧图呢？