说到Css Sprites，现在还没有一个很官方的译名，网上有很多叫法，为了好记些，这里就叫Css拼图或Css雪碧(比较潮的说)。Css Sprites是一个比较早的技术了，最初应用在导航条上比较多，比如要实现默认情况下和鼠标悬停在菜单上显示不同背景的效果，可以在a:link和a:hover定义不同的背景图片，为了使这种悬停效果显示更流畅，图片加载更快，将相应的图片整合在一张，这便是Css Sprites的一种应用。 现在讲Css Sprites的优势，最重要应该是提升Web页面的性能，减轻服务器压力。这样的好处不仅使浏览者打开页面的速度更快、增加页面PV，更实实在在的是给服务商减少了成本，所以这一技术的广泛应用也跟各公司的领导认可有很大的关系。 Css Sprites提升页面性能基本可以从三个方面体现： 1、减少http请求数，这一点应该可以得到大家的认可; 2、减少整个图片的大小，查看每张图片的属性，我们都可以看到有大小和占用空间两个不同的值，如果将多张图片合并到一张大图中，那大图的大小和占用空间是远远小于所有小图加起来的大小的，具体实例可查看崔凯的文章《CSS Sprites 图片整合技术》有详细介绍; 3、减少css文件的体积，这一点我会在接下来详细介绍。 Css Sprites虽然有以上的优点，但也不是彻底完美的，其劣势就是使项目维护成本的增加，这主要表现在三个方面： 1、图片的拼合、摆放需要更多的时间。之前的单张小图不会存在这个问题，但现在如果要将多张小图拼合在一起，就需要考虑各图摆放的位置，每个小图的应用时候会对其周围的其他图片造成影响，这些都得花时间来考虑; 2、读取图片位置的计算。在写css时，每应用到大图中的某一小图时，就得量取一次该图的纵横位置，而且必须要绝对精确，这是很费时的; 3、后期图片的增加和删除。在项目后期维护中，有些页面可能会经常改动，那大图中相应的图片就得进行相应的调整，有时候可能还会遇到迁一发而动全身的麻烦。 毋庸置疑，Css Sprites的应用优势还是很大的，为了性能，其他的也只能想办法解决。接下来就谈下我一般对Css Sprites的操作方法。 本文由CSS中国整理 |