saber酱的抱枕

Fly me to the moon

10/4
20:49
学习 软件

CSS Sprites工具CyotekSpriter

CSS Sprites通常被意译为“CSS图像拼合”或“CSS贴图定位”,是一项把多个背景图片结合到一张png图片上,以背景图片定位来显示的前端技术。如果我们自己来拼合图像,不但过程麻烦,而且各个图像的起点坐标更是要一个个量,这就更繁琐了。而这个软件——CyotekSpriter的出现就把这一流程极度简化了。

现在有小背景图若干,怎样使用CyotekSpriter来拼合成一张图像呢?

方法很简单:把所有图片选中,拖到CyotekSpriter的窗口中就OK了。

看红框处,可以随时调整图像的宽度

左下角的第二项是css,我们看到有许多类选择器,每个选择器都是以图像的原名来命名的,直接给出了图像起点的坐标。鼠标在当行左侧点击即可选中一行,很方便。

这项技术还有个优点:如果有一个区域,鼠标经过的时候其背景图换成另一张图。如果使用两张图来切换,第一次切换的时候要切换的背景图才开始加载,中间有一段时间是没背景图的。如果使用同一张图的定位则没有这个问题。

CSS Sprites工具CyotekSpriter