CSS Sprites

关于CSSGaga http://www.99css.com/cssgaga/
1.css sprite:使用时注意需要合并的碎片文件必须在slice文件夹中。

background-position 属性设置背景图像的起始位置；background-image:url()设置文件路径；width和

height设置图像的宽度和高度。

合并后的文件在gaga-temp中。

CSS Sprites原理

　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-

image”，“background- repeat”，“background-position”的组合进行背景定位，background-

position可以用数字能精确的定位出背景图片的位置。

CSS Sprites优点

　　利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS

Sprites最大的优点，也是其被广泛传播和应用的主要原因；

　　CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的

字节总和。

CSS Sprites缺点

　　诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点

　　在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块

内不会出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如

果不够宽，很容易出现背景断裂；

　　CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确

位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成

工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复

制，拷贝就OK！

　　CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需

改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片

，这样图片的字节就增加了，还要改动css。

　　CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利

弊，再决定是不是应用CSS Sprites。

2.css hack: 由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析标准不一样，因此会导致生成的

页面效果不一样，得不到我们所需要的页面效果。 这时我们就需要针对不同的浏览器去写不同的CSS，让

它能够同时兼容不同的浏览器，能在不同的浏览器中得到想要的相同的效果。 这个针对不同的浏览器写

不同的CSS的过程，就叫css hack。