【www.hzclsc.cn--苹果手机】

  使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中，即你的一张CSS Sprites由10张图片组成，那将避免9次HTTP请求，这减少的9次请求时延，正是加速的加载时间。这也有问题，跟每个HTTP请求的服务器开销一样，需由Apache的子进程管理，占用20MB的内存。你最好帮你的服务器进程减少HTTP请求：卸载媒体到Web前端Amazon S3，诸如此类。下面是两个CSS Sprites，一个是Google的，一个是PaulStamatiou的。

  照猫画虎，把你网站上经常使用的web图片元素打包 比如你的logo，RSS图标，还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具，把它们放在单个的图片里。你可以尽贴着放置图片，但要是你稍微留点白再下一步选中会更简单些，然后保存图片。

  编写CSS代码

  有了CSS Sprites，你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理：只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击，选择编辑切片。在弹出的窗口会有图片的分辨率和位置。

  在这个示例中，我选用大小为42 42px的图，它有336px的偏移（译注：是指左偏移）并紧贴着顶部。这样便形成了相应的CSS：

a.stammy, a.stammy:hover{
  background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
  display:block;
  height:42px;
  width:42px;
  text-indent:-9999px;
  overflow:hidden;
}

  CSS选择器对所有含 >

  设置溢出隐藏 解决当你选择要替换的文本的时候，那高亮部分会一直延伸到屏幕左侧的烦人问题 ，正如Rob所说。对其他所有图片如法炮制，并对每个选择器命名。

  编写XHTML代码

  目今你已经对每个图片有一些CSS选择器。至此你已经搞定了大问题，还差最后一步。现在只需对每个选择器创建链接。

  相当简单吧？用CSS和链接设置类，将精灵的信息组合起来，只显示精灵的一部分。虽此，因为我们甚至没使用一个img标签，我们不能设置alt属性，而这对移动用户、搜索引擎、屏幕阅读器之类的来说至关重要。将文字写在链接中，再用CSS文本缩进将其移出屏幕范围，这样你就无需吧文字叠在图片上而同样具有可用性。

本文来源：http://www.hzclsc.cn/pingguo/34085.html