一、 什么是css sprites

 

　　CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，然后再利用background-position进行背景图定位的一种技术。

 

　　二、为什么需要css sprites

 

　　CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌等各公司的网页中到处都可以发现CSS Sprites 的影子。他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所=有的零星的图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像以前那样一张一张的慢慢显示出来了，对于当前的网络所流行的速度来说，不超出200kb的单张图片所需要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，就因为计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请求的次数就越多。为了减少HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等并不使用

 

　　很多网站的导航栏图标、登录框图片等，使用的并不是<img>标签，而是CSS Sprite。本课程分析了CSS Sprite的实现原理，详细讲解制作方法，实现完整效果，让你快速掌握CSS Sprite技术。

 

　　三、CSS Sprites的优势

 

　　在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负担，提高网页的加载速度。

 

　　因为假我们现在有9张小图片，（例1）那么就会就有9个HTTP请求，但是如果把这九张小图放在一张大图里，那就只需要请求1次，因为你要的9个小图都在一张大图里了，请求一次后不用再次发送HTTP请求去请求图片资源。

 

　　例1.

 

　　当页面加载时，不是去加载每一个单独的图片，而是一次加载整个组合图片。它大大减少了HTTP请求的次数，减轻服务器的压力，同时也缩短了悬停时候加载图片所需要的时间延迟，使效果更流畅。

 

　　随着页面设计向着精致、 巧妙的方向发展，便开始考虑用非Js的方法制作鼠标滑过、悬停菜单的效果，这时精灵图应运而生。