/* 336x280*/
2005 年的时候 CSS 禅意花园 (CSS Zengarden) 的园主 Dave Shea 对 CSS Sprites 技术的作过详细介绍。CSS Sprites 技术提倡把所有背景图片合并到一个图片文件中，并使用 CSS 的 background-image 和 background-position 属性来定位和调用。
这种方法看似繁琐，但却是非常有实用价值的。
首先，CSS Sprites 能较少 HTTP 请求次数。
我们知道，HTTP 请求数对网站的工作性能有较大关联。如果背景图分开存放，每一次调用都会产生 HTTP 请求，一定程度上增加了服务器的负担。而单个背景图的设计方法，只需请求一次即可取回背景图片。很多大型网站，包括雅虎，新浪等，都采用了 CSS Sprites 技术。
其次，CSS Sprites 能防止背景图片延迟加载。
有时在点击以图片作背景的按钮时会发现，鼠标悬停的时刻才会触发浏览器下载背景图片，这是非常差劲的用户体验。但如果将图片存放与单个文件，就能避免延迟加载。因为在打开网页的首次请求中，图片已经加载完毕。
然而，使用单个图片文件存放的方法会降低可维护性。而且图片的定位比较繁琐，缺乏灵活性。在雅虎开发小组的 YUI 产品中，采用了加大图片距离的方法，同时也增加了图片的体积。
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/css-sprites-image-cut-and-optimize-skill/" title="CSS Sprites，图片切割与优化技术" rel="bookmark">CSS Sprites，图片切割与优化技术 | 芒果小站</a>
已经有 12 条群众意见
- 狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全)
#1/2009-06-18 16:50[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 克兰印象 » 60+CSS技巧教程资源大全
#2/2009-07-26 11:03[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 60+CSS技巧教程资源大全 | 帕兰映像
#3/2009-08-18 06:53[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog
#4/2010-01-28 16:51[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 还是再推荐一下这个CSS技巧教程资源大全 | SiteComment
#5/2010-02-25 21:08[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全
#6/2010-05-08 16:43[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 60+CSS技巧教程资源大全
#7/2010-05-12 21:58[...] CSS Sprites, 图片切割与优化技术 [...] 回应
- 老饕
#8/2010-08-06 22:58呵呵，我要详细学习一下! 回应
- 老饕
#9/2010-08-06 22:59喔~~你那个随机链接用的是评论数吗？ 回应
- 芒果 对 说
#10/2010-08-07 11:18请详细参考 http://www.mangguo.org/wordpress-random-post-call-code/ 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全) | 前端殿堂
#11/2011-04-29 15:43[...] CSS Sprites, 图片切割与优化技术 这篇文章不是告诉你什么是CSS Spries，也不是告诉你如何使用CSS Sprites，而是 —— 为什么要使用CSS Sprites? 四，CSS优化我个人对CSS优化的看法是: 在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。 [...] 回应
- 淘宝网女装批发
#12/2011-08-08 17:49我要找的就是这个 回应
我简单说几句