把小图片都集中到一张大图片中？思路新颖，但效果一般

94smart说yahoo的新版网站中，有一个不错的设计，就是把很多小的图标、背景图片都存储到一张大图片中，然后用css控制显示范围来达到“使用”但张小图片的效果。乍一看很不错，但仔细分析后我觉得不见得非常实用，并且看yahoo其他的页面，也并没有广泛应用这种方式，更多的还是切割之后的小图片，集中到大图片的设计也许只是开发测试阶段的权宜之计？

实现方式大体如此（以<a class=”slideshow”为例）：首先将大图片定义为背景

其中icons_1.1.gif就是一张包含有众多小图片的大图片，其中甚至还留有充分的空余，可能是为了存放修改后的小图标预留的。

然后定义slideshow class背景的位置，当然是指定大图片中小图标的坐标了：

这样，结合以slideshow为class的object外部盒子模型，在定义了背景及其偏移位置之后，我们就“恰好”只能看见背景图中露出一个完整的小图标。

大体想了一下，这样作的优点有：

• 文件数量少了，和分散的小文件相比总体积增加并不多，但却减少了访问时对服务器的请求次数，有利于优化速度。
• 对于开发代码管理来说，大的文件在命名、管理上要更有条理一些。
• 图标改进更换无须增加新的文件，只需在大图片的预留空处放置，并修改相应css定义即可（妙！）
• web服务器的log文件会小很多。

但是也存在一些缺点：

• 在css的盒子模型中，一定要记得“遮住”无须显示的部分，增加了编码复杂度。
• 不知道有很多这样把大图片作为background的网页，浏览器处理时间和占用内存是否会有明显增加，因为有时即使是不显示出来的内容也要占用系统资源的。

所以综合考虑下来，由于只能使用css遮盖的方式实现显示目的，不能像map那样直接指定坐标范围，所以虽然是借鉴单机软件编程中的一个小技巧，思路比较新颖，但实际效果一般，个人认为不建议在实际开发中使用。