css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进
1.增加了单独添加单张图片以及删除单张图片的功能
2.增加了生成.sprite文件用以保存雪碧图信息
3.增加了打开.sprite文件功能
什么是css sprite
CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
为什么要用这个工具
1.加快网页加载速度
浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染
2.后期维护简单
该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,直接生成代码,简单易用
3.开源
该程序已经在github上开源,地址:https://github.com/iwangx/sprite ,去构建属于你自己的雪碧图生成工具吧
csdn下载地址(不要分)
http://download.csdn.net/detail/wx247919365/8660503
如何使用
1.用ps或者dw把需要的图片切下来
2.打开CssSprite.exe
打开CssSprite.exe文件
3.打开图片
点击左上角按钮打开图片
现在版本中一次只能打开一种类型的图片文件
4. .sprite文件
此次更新中新增了生成图片的时候同时生成.sprite文件的功能,程序中可以通过点击按钮“打开.sprite”按钮,选择.sprite文件,还原雪碧图原视图
请务必保证.sprite与其中的图片文件在同一文件夹内
5.排布图片
可以选择上面的最上面按钮今天横竖的默认排布,也可以鼠标选中图片拖动位置,拖动完成后程序会根据内部图片的位置生成面积最小的雪碧图,当然也会改变相应的图片位置
可以点击+,-号图片按钮添加以及删除图片,目前只能操作单张的图片。
6.代码生成
在程序中可以生成sass代码,以及css代码,看自己需要嘛,自己选择,选中“是否是手机端”的时候会把所有的尺寸除以2,因为手机端往往会设计图比较大,所以要缩放,建议生成图片后再复制生成的代码
7.保存雪碧图
点击“生成雪碧图”按钮,程序会默认选中你在第3步的时候打开图片的地址,然后点击确定后生成雪碧图。
生成的同时会生成.sprite文件
css sprite,css雪碧图生成工具V3.0更新的更多相关文章
- V4.0到来了,css雪碧图生成工具4.0更新啦
V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/det ...
- css雪碧图生成工具4.3更新
v3.0更新介绍地址:http://www.cnblogs.com/wang4517/p/4476758.html v4.0更新介绍地址:http://www.cnblogs.com/wang4517 ...
- css雪碧图生成工具4.2更新
v4.0更新连接:http://www.cnblogs.com/wang4517/p/4493917.html v4.1更新连接:http://www.cnblogs.com/wang4517/p/4 ...
- css雪碧图生成工具4.1更新
V4.0介绍地址:http://www.cnblogs.com/wang4517/p/4493917.html 此次更新主要针对已有BUG的修复,用户可在客户端上直接看到更新信息,自己去下载 已修复问 ...
- !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...
- compass与css sprite(雪碧图)
什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...
- css sprite css雪碧图生成工具
最新地址:http://www.cnblogs.com/wang4517/p/4476758.html
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- 关于css雪碧图sprite
天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...
随机推荐
- jquery1.7.2的源码分析(三)$.Deferred
例子的详细讲解 Filter Resolve var filterResolve = function() { var defer = $.Deferred(), filtered = defer.t ...
- [Java] Spring + SpringMVC + Maven + JUnit 搭建
示例项目下载: https://github.com/yangyxd/SpringDemo 利用前面 SpringMVC 项目的配置方式,完成初步的项目创建.下面只讲一些不同之处. 传送门: [Jav ...
- 7Hibernate高级----青软S2SH(笔记)
- Unity3D Editor 扩展
官方教程:链接 EditorLayout API:链接 Handles API:链接 1.首先来个Inspector面板Editor的实现 要实现一个组件在Inspector中的Editor功能,首先 ...
- 【Sorting Collection】
排序集锦 各种排序算法,总结一下,一直在遗忘...... [冒泡排序] 就是下面这个鬼啦: c实现代码(升序): #include<stdio.h> void BubbleSort(int ...
- KMP学习之旅
说起kmp就要从字符串的匹配说起,下面我们谈谈字符串的匹配 给定一个原字符串:bababababababababb,再给定一个模式串:bababb,求模式串是否在源字符串中出现 最简单的方法就是遍历源 ...
- 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币
题目描述 在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币系统中,硬币的面值通常是1,5,10,20或25,50,以及100单位的 ...
- 08-linux 其他知识
linux其他知识点 1-防火墙- iptables原理 2- 本部分属于一步一步学习大数据系列之 Linux 的章节,欢迎订阅更多文章 更多内容请参考:一步一步学习大数据系列介绍
- 在Azure虚拟机上安装SQL server
Azure虽然向用户提供SQL paas服务,但是大多数用户还是习惯在用虚拟机自己搭建SQL server,这样的好处是便于后期最大化的扩展,所以鉴于这些情况,所以觉得有必要写这篇博客. 首先,我们要 ...
- [Python] from scipy import sparse 报 DLL load failed:找不到指定模块错误
依赖vc运行环境.需要安装 vc_redist Py3.5要安装2015版 传送门: https://www.microsoft.com/zh-CN/download/details.aspx?id= ...