HTML中精灵图的使用方法，解释css sprites，如何使用

1.CSS Sprites简介

Css sprites 可翻译为css精灵，也有人翻译为css雪碧，因为sprite也有雪碧的意思。在国内习惯成他为图片整合技术，说起来这个称呼也是满贴切的，因为他确实是多张图片整合为一整图片的技术，为什么要把多张图整合到一张上呢，这样做有什么好处呢？因为这样的话，当您访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了

2.CSS Sprites原理

Css sprites是将多张零散的背景图片整合到一张背景图上，然后通过background-position来调整背景的位置，这个时候你必须确保使用该张精灵图的容器要比背景图片小才是OK的，不然很容易漏出其他的背景图片，所以尤其要控制好盒子的大小；其次，你还需要注意书写背景定位的时候极大多数都是负的，水平为负数，图片才会往左侧平移，所以才会显示出你需要的那部分背景图，垂直方向也是同理。当多个盒子引用一张背景图时，只需要改变背景定位就可以改变页面中的显示部分为哪一部分背景图，这样做的目的就是为了降低浏览器向服务器的请求次数，这样一来可以大大提高网页的加载速度。

CSS Sprites 的优点：

1、利用CSS Sprites能够减少浏览器向服务器的请求次数，减少http请求，从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。

2、利用图片精灵还能减少图片的字节，你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可，所以减少图片字节也是显而易见的。

3、在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了，如此便提高了工作效率。

4、如果想改变网站风格，你只需要处理一张图片就可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。

CSS Sprites 的缺点：

1、在应用精灵图片的时候，你需要考虑当前盒子会不会漏出其他的背景图，这个还好，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。

2、制作精灵图的过程比较繁琐，你需要处理好每张图之间的距离和位置，如果做得不合理，那么使用起来就比较麻烦了，甚至需要单独创建一个空的盒子来装背景图。

3、使用精灵图的页面后期维护带来了繁琐，因为他是多张图在一张图上，牵一发而动全身的感觉，你改变一张背景图，如果大小发生变化，那么其他的你就得动，只要你动了，那么所有的背景定位都将需要改变，所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。

CSS Sprites的使用--直接上代码

<u1>
    <11 class="car"><a href="#">汽车</a></1i>
    <1i class="shop"><a href-"#">购物</a></1i>
    <1i class="travel"><a href="#">旅游</a></li>
    <li class="sport"><a href-"#">体育</a></1i>
</u1>

.car a{background-position:00;}
.hop a{background-position:-62px 0;
.travel a{background-position:-124px 0}
.sport a(background-position:-186px 0)
.car a:hover{background-position:0-22px;}
.shop a:hover(background-position:-62px -22px;
.travel a:hover(background-position:-124px -22px}
.sport a:hover{background-position:-186px -22px}