下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 网页中的demo 并解压至 D 盘根目录 images 目录下存放三个子目录,将要合成雪碧图的图片放到子目录文件中 将要合成的图片直接拖到软件中,出现Image code 将Image code内的css代码复制覆盖到style.css文件中,再把style.css文件拖到软件中 最后打开_gag

V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视

遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.hongkiat.com/blog/compass-image-sprite/ 作者Thoriq Firdaus 译者zEx 前端性能优化,一直是前端开发中非常重要的一环,而其中静态资源特别是图片的优化,又占据了很大的比重.图片优化的方法有很多种,其中非常基本而常用的,就是雪碧图. CSS雪碧图就是将

http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new  2015-10-27 http://isux.tencent.com/icon-font.html  图标字体化浅谈(教程) 2015-11-3 https://icomoon.io/app  图标字体生成器 IcoMoon!一个可以通过个

compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用compass制作雪碧图源码文件目录: 这里不讲解代码,请在源码中查看,源码中标有注释. 源码地址:https://github.com/LiangChengweb/compassSprites git的远程:git@github.com:LiangChengweb/compassSprites.git

V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/detail/wx247919365/8685489 提示:如果不是win7或者程序运行不起来的话请下载微软的.net framework 3.5运行环境 一.增加客户端版本更新提醒 服务器端版本更新后,客户端如果没有更新要最新版本,会在标题中提示,点击更新按钮出现版本更新的简单介绍 二.删除多余的选择背

1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为*.png时,它会假定将这个目录下的所有.png图片制作成一张雪碧图 你也可以通过一定的规则让它按照自己需要的图片以及排版来生成相应的雪碧图,设置如下: 第一个框框里面的设置是把所有color文件夹下的图片合成一张大图,同事会编译出对应的css文件. 第二个框框里面的设置是把color文件夹下的图片

雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方. 雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: a.使用Photoshop新建一张背景透明的图片. b.将小图片复制到此图片中,排列好每个图像的位置,图片幅面不够的话,可以用画布大小调整大小. c.按照所有小图片的范围裁剪图片,存为透明背景的png图片.

1.配置文件config.rb http_path = "../../../" css_dir = "Content/css" sass_dir = "Content/sass" images_dir = "Content/images" #css_dir = "Components/Table" #sass_dir = "Components/Table" #images_dir =

雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任务目录下本地安装 gulp及任务需要的gulp插件. (1)建立package.json文件,可以手动建立.也可以使用 cnpm init,然后在命令行中写(学用命令行) (2)在指定的任务目录下本地安装gulp及插件:   cnpm install gulp --save  cnpm instal

将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0

v4.0更新连接:http://www.cnblogs.com/wang4517/p/4493917.html v4.1更新连接:http://www.cnblogs.com/wang4517/p/4513711.html v4.2下载地址:http://download.csdn.net/detail/wx247919365/8718787 更新说明 此次更新主要是针对于手机端图片的生成调整,因为pc还好,手机端是需要自适应的(手机端自适应),图片尺寸以及大小都会做相应调整,当然我希望统一标准

V4.0介绍地址:http://www.cnblogs.com/wang4517/p/4493917.html 此次更新主要针对已有BUG的修复,用户可在客户端上直接看到更新信息,自己去下载 已修复问题: 1.单张图片的删除问题,有的用户提出了不能对单张图片进行选中删除,这里得到了解决 2.生成.sprite文件然后重新打开.sprite文件出现找不到图片的问题,这里也得到了解决 增加功能 在选中是否是手机端的时候,增加了选择手机端单位以及缩放大小的选项,不过大家可以先不用这个功能,可能以后我还

v3.0更新介绍地址:http://www.cnblogs.com/wang4517/p/4476758.html v4.0更新介绍地址:http://www.cnblogs.com/wang4517/p/4493917.html v4.1更新介绍地址:http://www.cnblogs.com/wang4517/p/4513711.html v4.2更新介绍地址:http://www.cnblogs.com/wang4517/p/4516249.html 更新说明 此次更新主要针对与移动端的

最新地址:http://www.cnblogs.com/wang4517/p/4476758.html

使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3.生成的雪碧图 4.css样式查看

Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理:CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量.该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签. 如何生成雪碧图? 安

1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服务器发送请求,那么请求的次数将大大增加.由此出现了雪碧图的概念 3:用处:是一种CSS图像合并技术,方法是将众多小图标合并到同一张图上,用来减轻http请求压力.然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分. 我也从网上找到了一张雪碧图:(其实就是一张图片放

什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力. 这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用