做前端的稍微有点经验的都知道 可以通过合并小图片 来减少请求数,

最早可能都是通过 fw、ps 等工具来手动合并,

这种方式的缺点就不吐槽了,效率低,可维护性差 等等 ....

一些很厉害的人,往往会开发出很厉害的程序,来解决重复性的劳动,

1.  https://github.com/iazrael/ispriter

2.  http://www.uini.net/?p=870

3.  http://csssprites.org/

4.  more ...

这些工具,我都稍微了解过,但最后觉得比较好使(适合自己)的是 SmartSprites(http://csssprites.org/)

个人觉得它的好处:

1. 语法简易,控制灵活;

/** sprite: icon-14; sprite-image: url('../images/components/icon-14.png'); */

 首先定义 一个合并图片,定义内容包含,合并标识,合并图片生成地址,还有更多参数,比如:纵向还是横向合并,图片名字是否自动生成等 ....

.icon-add-14
{
background-image:url('@{bg-components-srpite-url}icon-add-14.png'); /** sprite-ref: icon-14;*/
}
.icon-batch-delete-14
{
background-image:url('@{bg-components-srpite-url}icon-batch-delete-14.png'); /** sprite-ref: icon-14;*/
}

使用时只需要在正常 gackgrund-image 后面加上 特定的注释语法,sprite-ref 指向开始的 sprite 定义,标识那几个小图合并到同一张图上,

这个也有更多的参数,比如:position 方式,margin 值 等等 .....

这样看起来是不是很简单明了,完全不破坏你原有的写法,只是增加注释而已!

2. 基于 cmd 命令,任何程序都可以调用

smartsprites.cmd --root-dir-path xxx  --output-dir-path xxx --css-file-suffix ""

指定一个 css 文件目录,指定一个输出目录,指定一个 css 文件生成后缀

当然这货也是有缺点的:

1. 基于 java ,所以必须需要 jre ;

2. 生成的 css 文件不能直接覆盖还有 css 文件,所以需要两个目录,一个 css 源目录,一个 css 输出目录;

3. 它是居于 css 注释语法,比如使用 Less 编译后 就会破坏其 注释语法, 这个我已经有处理 grunt-contrib-less-smartsprite

更多文档请移步 http://csssprites.org/

如果在使用 smartsprite 过程中有什么疑问,可以留言,共同讨论!

SmartSprites 智能批量合并 CSS 雪碧图的更多相关文章

  1. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  2. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

  3. 前端优化:css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  4. CSS雪碧图(精灵图)使用

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...

  5. css雪碧图(精灵图)与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  6. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  7. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  8. gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     ...

  9. css雪碧图制作

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

随机推荐

  1. 深入了解Android蓝牙Bluetooth ——《总结篇》

    在我的上两篇博文中解说了有关android蓝牙的认识以及API的相关的介绍,蓝牙BLE的搜索,连接以及读取. 没有了解的童鞋们请參考: 深入了解Android蓝牙Bluetooth--<基础篇& ...

  2. erlang -- ios apns provider -- erlang 实现

    os apns-apple notification server 与第三方provider的通信原理网上已有很多介绍,这里不再介绍,有想了解的大家可以去IOS官网https://developer. ...

  3. 转载:Create a Flash Login System Using PHP and MySQL

    本文共两部分: 1. http://dev.tutsplus.com/tutorials/create-a-flash-login-system-using-php-and-mysql-part-1- ...

  4. (转载)UTF-8和GBK的编码方式的部分知识:重要

    GBK的文字编码是双字节来表示的,即不论中.英文字符均使用双字节来表示,只不过为区分中文,将其最高位都定成1. 至于UTF-8编码则是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节) ...

  5. 启动vsftpd失败

    启动vsftpd失败 在使用centos时, 要用ftp上传文件, 但是一到脚本的ftp命令就会出错: rpm -Uvh http://mirror.centos.org/centos/6/os/i3 ...

  6. 动态调用WCF不添加服务(svcutil.exe)

    记录下 首先用svcutil.exe把指定wcf接口的信息下载下来. 生成代理类 比如说接口地址为 http://localhost:6666/Service1.svc 以管理员身份打开cmd 执形 ...

  7. Android权限全记录(转)

    常用权限: 读写存储卡装载和卸载文件系统 android.permission.WRITE_EXTERNAL_STORAGE android.permission.READ_EXTERNAL_STOR ...

  8. [笔试题]黑板上写下50个数字,选两个黑板上数字a和b,在黑板写|b-a|,剩下的数字?

    在黑板上写下50个数字:1至50.在接下来的49轮操作中,每次做如下操作:选取两个黑板上的数字a和b,擦去,在黑板上写|b-a|.请问最后一次动作之后剩下的数字可能是什么?为什么?(不用写代码,不写原 ...

  9. unable to execute dex:GC overhead limit exceeded unable to execute dex:java heap space 解决方案

    最近做厂商适配,厂商提供了一部分Framework的jar包,把jar包通过Add Jar放到Build Path中, 在生成APK过程中,Eclipse长时间停留在100%那个进度. 最后Eclip ...

  10. iOS应用国际化教程(2014版)

    本文转载至 http://www.cocoachina.com/industry/20140526/8554.html 这篇教程将通过一款名为iLikeIt的应用带你了解最基础的国际化概念,并为你的应 ...