FITURE

If you can fight, fight.

首页 >> 分享>>HTML/CSS>>谈谈CSS Sprites(CSS 精灵)

谈谈CSS Sprites(CSS 精灵)

Posted by fiture / 2011年11月24日 / HTML/CSS」「分享

CSS Sprites/CSS 精灵/CSS 雪碧

本人不是什么技术达人,只是喜欢折腾,喜欢简单,追求完美。对于CSS我不敢说什么精通,只能说能用CSS基本实现结构与表现分离,能够恰当的运用实现一般的效果,偷笑……在说CSS Sprites之前,先来看段CSS代码:

backgroundurl(../img/stuff.png) -337px -225px no-repeat;

这是淘宝的一个页面元素的CSS代码。额,不知各位第一次看到的时候有没有看懂,反正我第一次看到的时候是蒙了,完全不知道是什么东东,其实这就是今天的主题CSS Sprites.上面的代码是CSS的代码合写,可以这样分开:

background-imageurl(../img/stuff.png);

background-position:-337px -225px;

background-repeat:no-repeat;

通过以上分析,其中的background-position是CSS Sprites的精华灵魂所在,上面的意思是让背景图片左移337px,上移225px,移动过后其实就是淘宝登录那个按钮,然后通过控制登录按钮的长度和高度实现只显示登录按钮的效果。

CSS Sprites(CSS 精灵、CSS 雪碧),它是一种网页背景图片处理方式,即将以前页面涉及的零星的背景图片,用图片处理软件合并到一张大图中,再利用CSS 中的background-image,background-position组合定位,将这张合并的大图应用到页面的不同地方。

CSS Sprites的应用现在是非常广泛的,几乎每个大的网站,都有使用。额,举例:google search、Google plus、淘宝等……早在2005年CSS Sprites这种技术都有人应用了,并详细阐明了其用途以及原理。为什么这么多的网站,这么多的个人博客都在用这种技巧呢?

1、其最大的原因就是:普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响,从而提高网站的性能。

2、CSS Sprites,能减小页面图片的总大小,节省宝贵的流量资源,从大的方面讲,绿色环保。

3、更换页面风格,更容易简单方便,只需要更改图片中的某些颜色,然后用CSS Sprites做小小的变动就可以达到一般的效果。

诚然也有一些缺点比如利用CSS Sprites,需要利用PS等图像处理软件按照一定的方式合理合并图片,然后对于初识CSS的人们,有一定的难度。但是这些小瑕疵不能成为我们不利用,学习CSS的一个借口,CSS Sprites有其固有的优点,以及一定的好处,对于一些大型的网站,减少其HTTP请求量,减少其网站流量,就是减少其成本。

PS:最后再说说CSS Sprites的repeat,其实我以前就是以为这个不好应用repeat属性,通过一定的了解学习,其实还是可以的,像本博客的header就是用CSS Sprites的一个实际应用,只要把repeat的对象铺满整张图片就可以轻松的实现了。

27条回应:“谈谈CSS Sprites(CSS 精灵)”

  1. 小呆说道:

    的确需要合在一起,这样很好。。。不过我一般都不整合!

  2. 心淡若水说道:

    CSS像妆一样
    网页是人
    一定要化的
    呵呵

  3. 老谢说道:

    表示完全不懂css。。

  4. Leyar说道:

    哈, 終於有我能看的懂的“技術文”了- -。

  5. MurphyL说道:

    这个博客的主题不错~~哈哈~顶一个来~~

    • Liza说道:

      i m very much inspired with the acting of ulka & kr#.8ika&ah230;.tsamar bhav,tatya guru,gangadhar rav…..all are superb in their roles……. thanks to the crew for this historical serial

  6. 西门说道:

    有利就有弊。弊端是后期维护稍微麻烦点,拼图的PSD千万不要丢了。

  7. 麦子花开说道:

    这个记得有在线生成合并后图片和相关css代码的,其实还是蛮方便的

  8. phoetry说道:

    图片较多时挺好用. 就是维护起来太麻烦了.

  9. Demon说道:

    表示CSS Sprites还是很不错的说。

  10. CONEY说道:

    看了下,现在是这样滴:background:url(../img/stuff.png) no-repeat -337px -225px;
    CSS Sprites 的确用的很多,很多WP主题也是用了它,比如流行的iFancy,Deve~

  11. ccaiai说道:

    看懂了…看来我css也学的的不错啊~(哦呵呵呵~)

  12. 老谢说道:

    刚刚数据库连不上了

  13. 路灯魂说道:

    终于能访问你的站点了,为什么之前一直访问不了呢?

  14. 云刊说道:

    减少很多图片请求,,

  15. 邓肯说道:

    这还不算技术达人? 我都只有仰视的份

  16. iSayme说道:

    确实如此
    我的那个主题 原来非常多的小图片素材.
    所以自己合并了一下.感觉还不错 呵呵

  17. win8迷说道:

    技术帝 哈哈

  18. 小爱说道:

    进来是因为。。。我很喜欢这篇文章的插图- –

  19. 飞天舞说道:

    好久没到哥子这里来了,最近研究起技术了?

  20. Jucelin说道:

    百度SEO工具也提倡这样操作。

  21. 腾逸天空说道:

    嘿嘿,只知道以达到目的为准。然后嘛压缩一下就好了。。

邓肯进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注