css sprites 样式生成工具

CSS Sprites（图片合并）技术，简单的说就是利用CSS的background-position属性，控制显示一张大图片的显示区域。

应用介绍

css sprites样式生成工具主要功能是减少使用CSS Sprites技术时测量坐标及填写background-position定位这部分重复而枯燥的时间，提高工作效率。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

使用方法

1.点击“文件” - “添加图片”，选择多幅图片文件；

2.工作区内图片，可以拖动图片来调整位置；

3.可以通过双击图片，来修改图片的相关信息；

4.可以通过“设置” - “生成设置”来调整生成图片质量与文件名称；

5.点“生成”，生成图片和网页文件；

6.点击要删除的图片文件，按键盘上的“Delete”即可。

CSS Sprites简介

加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

CSS Sprites原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。