ImagesSprite的使用帮助（一）--新建项目

运行ImagesSprite（下文无特别说明则IS表示ImagesSprite）会检测cif类型文件是否与IS绑定，如果不是则修改注册表使得cif文件双击默认打开IS。

首次使用当然是新建一个项目啦，点击【文件】->【新建项目】或直接键盘按Ctrl+N可以弹出新建项目的窗口。新建项目需要填写的信息很简单：

1.填写项目名称，生成的图片名默认为项目名称，演示html及css文件名则规定为项目名称。

2.选择项目目录，选择后IS会在该目录下建立一个images文件夹和一个build文件夹，其中添加进项目的图片会被复制一份到Images里，从界面删除图片时可选择是否删除物理文件（即Images目录下对应的图片文件），build目录是用来存放生成后的文件，一般项目生成后会产生html、css、image各一个文件。

3.填写一个总类名，我们知道，css sprites的各个dom引用的背景图片是同一张图片，生成时有一个选项选择是否【生成图片引用到各个小图片的选择器下】，当这个选项没有被勾上时，这个总类名就会发挥作用了。可以比较一下下面两个css样式表，第一个是选择生成引用到小图选择器下的，第二个是没有选择的：

生成样式一：

.address-book--plus
{
background-image:url(images/isTest.Png);
background-position:-7px -7px;
width:16px;
height:16px;
}
.alarm-clock
{
background-image:url(images/isTest.Png);
background-position:-7px -37px;
width:16px;
height:16px;
}
.alarm-clock--arrow
{
background-image:url(images/isTest.Png);
background-position:-7px -67px;
width:16px;
height:16px;
}

生成样式二：

.allClass{
background-image:url(images/isTest.Png);
}.address-book--plus
{

background-position:-7px -7px;
width:16px;
height:16px;
}
.alarm-clock
{

background-position:-7px -37px;
width:16px;
height:16px;
}
.alarm-clock--arrow
{

background-position:-7px -67px;
width:16px;
height:16px;
}

我们可以看到，两个生成的样式文件其别在于第一个比第二个的每个类下多了一行background-image:url(images/isTest.Png); 而第二个则比第一个多了一个类:

.allClass{
background-image:url(images/isTest.Png);
}

- 点击:491次