CSS Sprites

2011-01-10
  • 967
  • 0

    CSS Sprites其实出现的时间已经不短了,就是用CSS属性中的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,详细地解释一下就是将各种背景元素全部放到一个图片中,比如菜单效果,将默认状态、悬停状态、执行状态、访问过后的状态等效果图全部都放到一张背景图片里,在通过CSS属性中的hover、active、link、visited属性控制相应的背景属性来实现想要的效果。以前总是用这个方法来做各种效果,今天无意中在网上看到原来这种做法有它专有的名称,就叫做CSS Sprites,Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”,也有管它叫做“雪碧”的。

它的优点就是当CSS被加载时,将背景图片一次性的加载到本地,可以大大地减少HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。而且这项技术可以减少图片的大小,若干张图片单独存放会比全部存入到一个文件中大。

其最大的缺点就是需要制作人员要极其的细心,在页面中的表现要一点点的调整,而且还要考虑相应的浏览器兼容性问题,很繁琐,不过网上已经有人开发出了CSS Sprites样式生成工具,可以在很大程序上帮助制作人员。

有一点要强调的是,CSS Sprites并不是万能的,它在背景需要平铺时就会出现问题,所以它所试用的范围是有固定范围的区域背景。

任何一种技术都不能完全满足我们的需要,但懂得灵活运用新的技术会给我们的工作带来事半功倍的效果,大家要多用才能完全的理解,完全掌握新的技术。