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次
学会开心每一天(: