CSS Sprites的概念、原理、适用范围和优缺点

• CSS Sprites概念

  CSSSprites在国内不少人叫css精灵，是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差很少的，因此无需顾忌这个问题。

  加速的关键，不是下降质量，而是减小个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。因此，图片越多请求次数越多，形成延迟的可能性也就越大。

   

  CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间做为一种网页制做方法流传，后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。因而这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内不少blog都提到CSS Sprites，最著名的例子莫过于http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个 40×2000的图 包办。社交大站Facebook最近也使用了一个 22×1150的图片 承担了全部icon.一时间，CSS Sprites无处不在。

   

• 原理

  咱们知道，自CSS革命以降，HTML倾向于语义化，在通常状况下再也不在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各类漂亮的图来装点。新时代的生产方式是，在HTML布满各类各样的钩子（hook），而后交由CSS来处理。在须要用到图片的时候，现阶段是经过CSS属性background-image组合background-repeat, background-position等来实现（题外话：为什么我提现阶段，由于将来浏览器若支持content则又新增另外的实现方法）。咱们的主角是，你必定猜到了，就是background-position。经过调整background-position的数值，背景图片就能以不一样的面貌出如今你眼前。其实图片总体面貌没有变，因为图片位置的改变，你看到只该看到的而已。就比如手表上的日期，你今天看到是21，明天看到是22，是由于它的position往上跳了一格。因此你也大概了解到，CSS Sprites通常只能使用到固定大小的盒子（box）里，这样才可以遮挡住不该该看到的部分。

• css sprites 适用范围：

  1，须要经过下降http请求数完成网页加速。

  2，网页中含有大量小图标。或者，某些图标通用性很强。

  3，网页中有须要预载的图片。主要是a与a:hover背景图这种关系的。若是a与a:hover的背景图分别加载，那么，就会出现用户鼠标移到某个按钮上，按钮的背景忽然消失再出来，产生“闪烁”，若是按钮文字色与大背景相同或相近，就更囧了，有可能让人产生按钮“消失”了的错觉。

   

• 须要知足的条件

  在网页设计中，经过这项技术拼合在一块儿的图片最好有一项规律。定宽或者定高。最好是宽高都能定下来。须要平铺的图片，显然不适合sprite。

  如上图的buttons，就属于定宽定高的状况。

  定宽状况下，则可平行排列若干小图片。定高，则纵向排列小图片。

  若背景既不定宽，也不定高状况下强行使用css sprites技术，则容易产生“不该该出现的图片出如今页面上”的状态。如果“强行定高”，也将很是不利于往后的维护。

• 优势

  咱们从前面了解到，CSS Sprites为何忽然跑火，跟可以提高网站性能有关。显而易见，这是它的巨大优势之一。普通制做方式下的大量图片，如今合并成一个图片，大大减小了HTTP的链接数。HTTP链接数对网站的加载性能有重要影响。

• 缺点

  至于可维护性，这是通常双刃剑。可能有人喜欢，有人不喜欢，由于每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。并且算图片的位置（尤为是这种上千px的图）也是一件颇为不爽的事情。固然，在性能的口号下，这些都是能够克服的。

  因为图片的位置须要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

  前面咱们也提到了，必须限制盒子的大小才能使用CSS Sprites，不然可能会出现出现干扰图片的状况。这就是说，在一些须要非单向的平铺背景和须要网页缩放的状况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样能够保持有限度的缩放。