有梦才会有明天

CSS Sprites 是一种网页图片应用处理方式，它可以将页面中用到的所有小图片整合到一张较大的图片中去。这样，访问页面时，载入的图片就不会想以前那样一张张的显示出来，这样可以有效的减少客户端与服务器的HTTP请求次数，进而减少延迟（因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。）。这就使用户（浏览者）获得较好的用户体验，即页面中所有的图片是一起出现的，而不是一张张地跳出来，状态栏显示着“剩余XX项”……

图片加载后，就可以使用CSS方法通过设置背景图片的方式实现对所需图片的精确调用。

CSS Sprites 的使用

有几篇关于CSS Sprites的文章，基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

CSS Sprites的例子

很多网站都在使用 CSS Sprites 技术，有人整理了下【来源http://blog.rexsong.com】。

1. 图片限制(Image Slicing)

典型如文本编辑器，小图标特别多，打开时一张张跑出来，给用户的感觉很不好。如果能用一张图解决，则不会有这个问题，比如百度空间、163博客、Gmail都是这么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 单图转滚(Single-image Rollovers)

触发切换图片的需求，传统方案得重新请求新图片，因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图，就能完美解决，然后再使用背景图技术模拟动态效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延长背景(Extend Background Image)

如果图片的某边可以背景平铺无限延长，则不需要每个角、每条边单独搞出来，图片能少一个就少一个。其实，这个理论还可以扩展到四角容器里，好处是能大大简化HTML Structure。

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

综合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

这是著名的视频分享网站Youtube的：

这是Google的：

这是Apple的：

图片太宽了，点击这里

CSS Sprite 的问题

由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题，fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo.org的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

相关资源：

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法测试工具：CSS tests and experiments

http://www.brunildo.org/test/index.html

将N多的小图片整合到一起，也不是件轻松的事，不过这里提供了一个在线工具，上传图片（Zip打包）即可得到哦拼合后的图像。

本文参考了：

CSS Sprite的研究与实现（使用）http://www.bbon.cn/post/89

CSS Sprite-看上去很美http://hi.baidu.com/vivaid/blog/item/d9feb064842b43f3f736541e.html

Google 首页上的 CSS Sprite http://www.marchbox.com/blog/css-sprite-in-google-search/

Exceptional Performance http://developer.yahoo.com/performance/

您可能还对这些文章感兴趣

• 2008年05月11日 -- CSS样式选择器 (0)
• 2008年05月10日 -- 浅谈用户体验 (0)
• 2008年03月30日 -- 改善评论时的用户体验 (2)