CSSSprites对CSS布局的意义

本文和大家重点讨论一下CSS Sprites对CSS布局的意义、优点和缺点，普通制作方式下的大量图片，现在CSS Sprites技术可以合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

创新互联公司专注于网站建设，为客户提供成都做网站、成都网站设计、网页设计开发服务，多年建网站服务经验，各类网站都可以开发，成都品牌网站建设，公司官网，公司展示网站，网站设计，建网站费用，建网站多少钱，价格优惠，收费合理。

CSS Sprites对CSS布局的意义、优点和缺点介绍

　　CSS Sprites技术早在2005年CSSZengarden的园主DaveShea就在ALA发表对该技术的详细阐述。

　　原先只在CSS玩家之间作为一种制作方法流传，后来出来个14RulesforFaster-LoadingWebSites，技术人员之间竞相传阅，其中第一条规则MakeFewerHTTPRequests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于google.co.kr下方的那几个动画。最新发布的YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon。一时间，CSS Sprites无处不在。

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）里，这样才能够遮挡住不应该看到的部分。

　　我们使用YUI的sprite.png举个例子，假如我们有这么一段代码，max代表最大化，min代表最小化，我们需要给它们配上相应的漂亮图片（这样我们的网站才能够吸引人）：

ExampleSourceCode 

 
 
 

  
  
  
最大化