前言:

使用CSS Sprite的目的是为了优化((#‵′)凸)。

Yahoo,以左侧导航为例:

CSS Sprites图片地址:

http://l.yimg.com/a/i/ww/sp/trough_2.0_062308.gif

HTML:

<ul id="trough-1" class="col1">
<li><a href="r/4d" style="background-position:-400px -120px">Answers</a></li>
<li><a href="r/2h" style="background-position:-400px -440px">Autos</a></li>
<li><a href="r/25" style="background-position:0 -761px">Finance</a></li>
<li><a href="r/28" style="background-position:0 -1600px">Games</a></li>
<li><a href="r/2r" style="background-position:0 -1400px">Groups</a></li>
<li><a href="r/3o" style="background-position:0 -439px">HotJobs</a></li>
<li><a href="r/24" style="background-position:0 -600px">Maps</a></li>
<li><a href="r/3a" style="background-position:0 -161px">Mobile Web</a></li>
<li><a href="r/2i" style="background-position:0 -561px;display:inline">Movies</a> | <a class="trough_tv" href="r/2j">TV</a></li>
<li><a href="r/3m" style="background-position:0 -1562px">Music</a></li>
<li><a href="r/gx" style="background-position:-400px -1119px">OMG</a></li>
<li><a href="r/33" style="background-position:0 -40px">Personals</a></li>
<li><a href="r/2p" style="background-position:-400px -161px">Real Estate</a></li>
<li><a href="r/s3" style="background-position:-400px -1321px">Shine</a></li>
<li><a href="r/2q" style="background-position:0 -1640px">Shopping</a></li>
<li><a href="r/26" style="background-position:0 -800px">Sports</a></li>
<li><a href="r/29" style="background-position:0 -79px">Travel</a></li>
<li><a href="r/2k" style="background-position:0 -121px">Yellow Pages</a></li>
</ul>

图片分析(图中虚线为20*20的参考线):

原始大小:

放大至200%:

特点:

  1. HTML结构清晰,背景写在a标签上;
  2. 切图方式:每个图标放置于20*20的单元格中,未从单元格左上角开始放置,而是上下左右都留有部分像素的距离(依据显示效果而定)。大部分情况下直接调用即可,如background-position:-400px –120px;偶尔需要调整偏移量,如background-position:0 -161px
  3. 第二列图标距离左侧400px,每行图标间隔一个单元格的距离,充分留白;
  4. 图片为gif格式,尺寸:420*1700,大小:16.2KB,总共80个图标。

Gmail,同样以左侧导航为例:

CSS Sprites图片地址:

https://mail.google.com/mail/images/2/5/chrome/icons7.png

HTML(以星标为例):

<div class="nH pX">
<div class="nH">
 <div class="nH">
     <div class="pi" style="height:4px;">
         <div class="ph p" style="width:4px;"></div>
         <div class="ph q" style="width:4px;"></div>
         <div class="l o"></div>
     </div>
     <div class="l m">
         <div class="l n" style="margin-left:4px;">
             <div class="k" style="margin:-2px 4px -2px 0px;padding:0px;">
                 <div class="diLZtc">
                     <div class="nH">
                         <div class="qk">
                             <span id=":qj" class="" idlink="">
                             <div style="overflow:hidden;white-space:nowrap;">
                                 <div id=":r0" class="p5" idlink="">
                                     <a class="p9" href="https://mail.google.com/mail/#starred" target="_top" title="已加星标">已加星标</a><img class="pW" src="images/cleardot.gif" /></div>
                             </div>
                             </span></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="dJ"></div>
     <div class="pi" style="height:4px;">
         <div class="ph i" style="width:4px;"></div>
         <div class="ph j" style="width:4px;"></div>
         <div class="l h"></div>
     </div>
 </div>
</div>
</div>

图片放大至200%:

特点:

  1. HTML结构极度混乱(咳咳,至少我是这么认为),甚至还有内联元素span嵌套div的情形。背景写在img上(Gmail将所有放图标的地方插入一个1*1的透明图片:,然后根据不同的class设置拉伸至不同的大小及背景坐标,并用margin修正偏移量),这么做的原因也许是跨浏览器的inline-block(Firefox 3以前的版本不支持display:inline-block)
  2. 切图方式:每个小图放置于20*20的单元格中,大部分左上角顶齐,调用时直接用该图标左上角的坐标取值即可,如background-position:-20px –20px
  3. 每个单元格放一个图标,比较紧凑。
  4. 图片为png格式,尺寸:180*120,大小:4.83KB,总共47个图标。

对比(带有强烈主观色彩,请自行判断):

YahooGmail胜方
HTML结构清晰,易于维护臃肿杂乱Yahoo
图片排列宽松紧凑,易于维护(尤其是我们这种小屏幕人士)Gmail
CSS调用方便,部分图片需微调background-position方便,部分图片需微调margin平手
图片优化可改为png-8格式进一步压缩(YUI的PPT中提倡用png-8,为什么自己不这么做呢)已压缩Gmail

最后的话:

二者各有优缺点,大家可取其精华,弃其糟粕,根据项目特点任意发挥,囧