认识并正确使用CSS Sprites

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2012-02-17 13:12:17
  • 点击:34074
[0分]

一、CSS Sprites简介

CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。而当中加速的原理不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,在总重要一定的情况下,图片越多请求次数越多,造成延迟的可能性也就越大。

认识并正确使用CSS Sprites

二、CSS Sprites原理

自CSS革命以来,HTML倾向于语义化,在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的,少不了用各种漂亮的图来点缀。在需要用到图片的时候,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,然后通过CSS属性background-image结合background-repeat, background-position等来实现。我们的主角是,大家一定能猜到了,就是background-position。通过调整background-position的数值,背景图片就能以不同的面貌出现在大家眼前。说到这里,大家都自然联想到制作鼠标滑过、悬停菜单的效果。现在有了CSS Sprits之后就可以不动用JS来轻松实现上述的效果了。

三、CSS Sprites的优点

利用CSS Sprites能很好地减少网页的http请求,从而大大提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因。

1、CSS Sprites能减少图片的字节——曾经比较过将3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

2、解决了网页设计师在图片命名上的困扰——只需对一张集合的图片上命名就可以了,而不需对每一个小元素进行命名,从而提高了网页制作的工作效率。

3、更换风格方便——只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,这样降低了维护的成本并提高其效率。

四、CSS Sprites的缺点

1、在图片合并的时候,把多张图片有序并合理地合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;另外在宽屏或者高分辨率屏幕下的自适应页面,如果图片宽度不够,就很容易出现背景断裂等不良效果。

2、CSS Sprites在开发的时候比较麻烦,设计师要通过PS或其它工具测量计算每一个背景单元的精确位置。这绝对是针线活,没什么难度,就两个字形容:繁琐(幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量方便多了,而且样式能直接生成、复制。)

3、由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

4、CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的CSS。如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动CSS。

总结:

在网页中,通过这项技术拼合在一起的图片最好有一项规律:定宽或者定高,最好是宽高都能定下来。如果需要平铺的图片,显然不适合CSS Sprites。凡事都有两面性的,从上述对CSS Sprites的介绍及其优缺点的分析,这项技术好与不好并不能一概而论的,要视网站的具体情况而定。分析时首先决定自己“是否需要”,还要综合开发成本,维护成本等问题进行详细分析,然后找到一个适合实际情况的方案再做定夺。

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华