芒果

/* 300x250 */

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 产品中,采用了加大图片距离的方法,同时也增加了图片的体积。

总之,CSS Sprites 有利也有弊。在追求性能的前提下,CSS Sprites 是值得推广的网页设计方法。

版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/css-sprites-image-cut-and-optimize-skill/" title="CSS Sprites,图片切割与优化技术" rel="bookmark">CSS Sprites,图片切割与优化技术 | 芒果</a>

已经有 10 条评论

  1. 狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全) - 2009-06-18 16:50

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #1
  2. 克兰印象 » 60+CSS技巧教程资源大全 - 2009-07-26 11:03

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #2
  3. 60+CSS技巧教程资源大全 | 帕兰映像 - 2009-08-18 06:53

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #3
  4. 学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog - 2010-01-28 16:51

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #4
  5. 还是再推荐一下这个CSS技巧教程资源大全 | SiteComment - 2010-02-25 21:08

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #5
  6. 网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全 - 2010-05-08 16:43

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #6
  7. 60+CSS技巧教程资源大全 - 2010-05-12 21:58

    [...] CSS Sprites, 图片切割与优化技术 [...] 回应

    #7
  8. 老饕 - 2010-08-06 22:58

    呵呵,我要详细学习一下! 回应

    #8
  9. 老饕 - 2010-08-06 22:59

    喔~~你那个随机链接用的是评论数吗? 回应

    #9
  10. 芒果老饕 说 - 2010-08-07 11:18

    请详细参考 http://www.mangguo.org/wordpress-random-post-call-code/ 回应

    #10

我简单说几句

推荐文章

最新评论

友情链接

一夜激情