定义css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点:
减少 1、如果是小图标,留的空隙可适当小一些,一般20像素左右
2、如果是大图标,要留的空隙就要大一点,因为大图标在调整的时候,影响到的空间也会比较大
图片排列方式有横向和纵向
合并分类的原则
有三种合并分类的原则,分别是基于模块、基于大小和基于色彩
a、把同属一个模块的图片进行合并
b、把大小相近的图片进行合并
c、把色彩相近的图片进行合并
合并推荐
在实际的雪碧图制作中,一般采用两种方法:一种是只本页用到的图片合并;另一种是有状态的图标合并
实现在以前,我们可能需要手动实现雪碧图,这是一件非常麻烦的且容易出错的事情。现在有了很多方便的工具来制作雪碧图。我经常使用是一个叫做css背景合并工具的小工具。
使用方法如下图所示:
维护
图像-画布大小alt+ctrl+c-选择定位位置(一般为左上角)
[注意]PNG8的颜色模式默认为索引颜色模式,在修改png8图片时需要更改其颜色模式为RGB模式,步骤为图像-模式-RGB颜色
1、选择图像-裁切选择基于左上角像素颜色,可以实现自动裁切的效果
2、先选定要保留的区域,然后选择图像-裁剪或者选择工具栏中的裁剪工具按钮进行裁剪
1、若图标为独立图层,则用移动工具拖动即可
2、若图标为非独立图层
a、先用选区工具选中图标区域,再用移动工具拖动图标,这样可以移动该图层
b、先用选区工具选中图标区域,再剪切ctrl+x,粘贴ctrl+v,可以将原来的图层分成两个图层,更有利于操作
作者:小火柴的蓝色理想
原文: