分类

图像制作

Css Sprite Tools(雪碧图生成工具)

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

大小:228 KB

语言:简体中文系统:WinXP, Win7, Win8, Win10, WinAll

类别:图像制作时间:2018-10-12

  Css Sprite Tools提供图片编辑功能,可以在软件对自己的图像内容进行排版,方便你在设计CSS网页的时候可以减少图片的HTTP连接数,从而让用户可以花费更少的时间加载图像内容,在设计CSS网页的时候部分用户会选择插入多种背景小图片,这些图片都是需要通过HTTP加载的,如果你部署的小背景图片较多,那么用户在浏览你网页的时候就会需要花费更多的时间,而这款软件的作用就是帮助你将多张小图合并为一张大图,减少HTTP的连接数量!

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

软件功能

  CSS有很多网页图片,用户在设计网页的时候可能添加了很多背景图

  如果你设置的背景图都是通过HTTP展开

  那么在对网页加载的时候就需要花费很多时间请求服务器

  利用这款Css Sprite Tools软件就可以解决这个问题

  可以将多张背景图合并为一张大的背景图,从而只需要加载一张图

  也仅仅需要向HTTP提供一个连接就可以加载CSS

  可以提升网页加载的速度,提高了网站的吞吐量肯定会有所帮助

  您可以根据自己修改的样式表文件生成基于特定需求的背景图像

  或者将样式表的样式生成到现有的css文件中

软件特色

  1、Css Sprite Tools软件制作方式简单,直接从本地添加图像内容

  2、支持背景图(Background)timg查看

  3、可以直接生成测试的图像,可以在网页查看你的背景图

  4、可以显示样式测试(Style Test),在HTML测试网页

  5、支持查看样式(View Style),对设计的风格查看

  6、软件具有多种背景图颜色设置

  7、更多风格的小图片实际上是一张图片。

  8、基于背景位置控制css显示,就像合并图像一样

安装方法

  1、下载Css Sprite Tools.msi软件直接启动安装,提示安装的信息

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  2、软件的安装地址是C:Program Files (x86)微软中国Css Sprite Tools

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  3、提示准备安装,点击下一步就可以查看软件的安装进度

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  4、提示Css Sprite Tools已经安装成功

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

使用方法

  1、打开Css Sprite Tools显示的界面如下图,你可以将多张图片打开到软件排版

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  2、如图所示,点击这里就可以进入图片加载界面,随后打开多张图

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  3、查找界面就是这样的,按住Ctrl,鼠标点击多张图片添加

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  4、提示浏览功能,你的图像在界面查看,可以选择横排,可以选择竖排

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  5、这里是CSS小图片设置,鼠标点击上面的内容就可以生成设置

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  6、如图所示,得到的参数就是这样的,这里的参数不需要修改

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  7、显示格式内容,支持png、JPEG、GIF三种图像,一般选择png就可以了

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  8、提示背景色设置,这里的背景就非常多了,自己选择一个吧

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  9、提示选择目录并生成测试文件,自己选择一个文件夹保存

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  11、保存以后得到CssSpriteExample.html文件,可以在浏览器查看

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

  12、以上样式中的小图片,其实都是一张图片。是根据css的background-position控制显示

Css Sprite Tools(雪碧图生成工具) 4.3 官方版

∨ 展开

网友评论

我要跟帖
取消
所有评论 共 0