CSS使用精灵图的方法:首先使用background-image属性导入精灵图;然后利用background-repeat:no-repeat设置图像不重复;最后使用background-position属性设置图像初始位置,进行精确定位。
图片整合原则:
边切图边整合。
定位时避免使用bottom,right等,用具体的数值,为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
将小图标预留足够的空间,因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距,以至于其它的图片可能会意外出现在本区域内。一般的情况下,会将这些小图标整合到文件的最右侧。
单张整合好的sprite图片在100KB以内。
按分类整合图片。
为了方便计算尺寸,一般情况会将sprites图的坐标计算成整数倍。
实现代码:
推荐学习:《css视频教程》
以上就是CSS如何使用精灵图的详细内容,更多请关注其它相关文章!