CSS Sprites 图片整合技术

html-css014

CSS Sprites 图片整合技术,第1张

CSS雪碧的设计思想是将所有需要用到的图标、小图片等汇聚到一张图片上，通过CSS定位来调取需要的图像。

所以你应该抛弃任何PSD已形成好的图片布局，也就你把需要的小图片都一一导出来。然后新建一个专门用于雪碧的源文件，比如第一行16px高度这个逻辑区域，用于排列所有16px高的ICO图片，以此类推，这样在逻辑上你会很清楚，哪个区域放什么类别的图片，而不是各种大小不一类别不同的图片混合排进去，那样会很乱的，不利于你以后对这个雪碧大文件的维护。

css过滤动画图片变大后闪不停，将三个图片整合为一张图片可以改善。这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术。