html雪碧图怎么设置,HTML 5开发的在线雪碧图片合成工具

Css Sprite，有时也称为雪碧图、精灵图，是每一个前端开都会遇到的问题，也是常见的小图片加载优化手段。相信各位同学都清楚其原理，具体就不赘述了。

之前一直有动机利用html5实现一个合成雪碧图的工具，方便小项目的快速开发，减少一些诸如开photoshop、fireworks等工具来合图的机械劳动，最近终于抽出时间将构思实现。

Go!Png介绍：

目前实现的功能如下：

支持图片文件拖拽；支持生成png图片与css文件；支持两种自动排列的模式；放大镜功能；磁力吸附对齐功能；工作状态导出功能，可以方便导出文件，在下一次操作通过拖放改文件来恢复工作状态(包括图片数据跟参数设置)；支持Mac(Chrome) ：)

使用说明：

1.拖拽图片小文件到操作区域，如下图：

2.输入类属性设置与目标图片、css文件生成，如下图

3.生成的css文件是可以通过改变css模版来定制的

使用的模版函数是John Resig的Micro-Templating，可以用的变量有：

x 图片的x坐标；y 图片的y坐标；w 图片的宽度；h 图片的高度；name 图片文件的名称(不带后缀)；absolute_path 绝对路径(自定义)；relative_path 相对路径(自定义)

x、y、w、h的解释如下图：

css模版的设置操作如下图：

4.生成目标图片、css后可以直接下载

点击download按钮即可完成下载：

5.工作状态导出

这个功能是可以将你目前的工作状态，包括图片的数据(图片、图片位置排列)，参数设置(包括主页的参数设置与css模版设置)，全部导出成一个文件，下次利用此文件便可复原工作状态。

导出如下图：

导入如下图：

即可复原：

html雪碧图怎么设置,HTML 5开发的在线雪碧图片合成工具相关推荐

php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
雪碧图sprity 合并多图使用心得
介绍 sprity 是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择. ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
css雪碧图如何调整大小
1.通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做! 2.直接调整雪碧图background-size大小例如,雪碧图规格14 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
CSS 背景图标（雪碧图、精灵图、iconfont）
目录雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...

html雪碧图怎么设置,HTML 5开发的在线雪碧图片合成工具

html雪碧图怎么设置,HTML 5开发的在线雪碧图片合成工具相关推荐

最新文章

热门文章