CSS Sprites技术,国内很多人也叫雪碧图,因为sprite麻 (你买一瓶雪碧就看得到大大的sprite字样了)

主要用于将网站的零碎图标的img标签取代,因为每个img标签引用的src就会造成一个http请求,将这些零碎的小图标合并到一起,

成为一张大图,就会一下子缩减数十个http并发请求量.

使用注意:它主要是对logo和其它一些设计的各种独特图标的加载优化而用的,如果用在网站的一些静态大图上反而会导致一个请求的http数据量过大,拖慢加载.

并且现在越来越多流行的方案是css字体图标svg标识等解决方案,它们是矢量(本体很小,且不会因放大而变形和不清晰)的,且有成熟开源的库 如fontawesome等

原理:

  • background-image
  • backgorund-position

当然我们不会笨到每个项目都费心的用ps先把图片拼接起来,然后一个图标一个图标去调整计算css position 截取需要的图标

我们可以给出需要这样处理的单个图标,然后直接得到需要的每个的css样式

比如我们可以使用在线的工具

Site:http://spritegen.website-performance.org/

Chinese Version:http://spritegen.website-performance.org/?action=home&lang=cn&change=Change

或者 我们可以使用开源的小工具软件(windows下exe文件)

https://github.com/iwangx/sprite

当然还有更好的选择前端工作流的grunt 的 task 的配置

使用grunt spritsmith 插件,自动化的生成需要的css,从而彻底的把我们从css图片整合中解放出来

(注意 @2x的图片需要保证是像素分辨率需要正好是1倍图的2倍数,即需要是偶数,否则会造成生成的css定位不准确)

github项目地址: https://github.com/Ensighten/grunt-spritesmith

在gruntfile.js里 定义任务

module.exports = function (grunt) {
grunt.initConfig({
sprite:{
all: {
src: 'path/to/your/sprites/*.png',
dest: 'destination/of/spritesheet.png',
destCss: 'destination/of/sprites.css'
}
}
}); // Load in `grunt-spritesmith`
grunt.loadNpmTasks('grunt-spritesmith');
}

代码clips:

使用grunt jit来自动创建加载任务
// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
cdnify: 'grunt-google-cdn',
sprite: 'grunt-spritesmith'
}); initConfig({}) 里
加入任务
sprite: {
all: {
src: 'app/images/icons/*.png',
retinaSrcFilter: 'app/images/icons/*@2x.png',
dest: 'app/images/spritesheet.png',
retinaDest: 'app/images/spritesheet@2x.png',
destCss: 'app/styles/_spritesheet.retina.scss',
padding: 2,
algorithm: 'top-down',
cssVarMap: function(sprite) {
sprite.name = 'icon-' + sprite.name;
},
algorithmOpts: {
sort: false
}
}
} /style
main.scss 引入
@import "spritesheet.retina";
@include retina-sprites($retina-groups); //媒体查询 传入图片选项组

CSS Sprites技术的更多相关文章

  1. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  2. CSS sprites 技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

  3. CSS Sprites技术原理和使用

      在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites ...

  4. 如何使用CSS Sprites技术进行图片合并

    http://jingyan.baidu.com/article/066074d6757654c3c21cb02d.html

  5. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  6. (转)CSS的Sprites技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

  7. CSS Sprites (CSS 精灵) 技术

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  8. 【CSS】CSS Sprites (CSS 精灵) 技术

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  9. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

随机推荐

  1. POJ 2084 Catalan

    Game of Connections Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 8772   Accepted: 43 ...

  2. Numpy基础数据结构 python

    Numpy基础数据结构 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的元数据 1.一维数组 import numpy as np ar = np.a ...

  3. 笔记-git-.gitignore

    笔记-git-.gitignore 1.      git忽略文件 有的文件不需要提交到公共仓库中,为此git提供了三种实现方式. gitignore文件 在项目的设置中指定排除文件 定义全局.git ...

  4. 笔记-python-lib-requests常用类/方法/属性

    笔记-python-lib-requests常用类/方法/属性 1.      requests模块常用类/方法/属性 在使用中发现对requests模块不够熟悉,写了几个案例后重新整理了一下文档,罗 ...

  5. python基础之流程控制、数字和字符串处理

    流程控制 条件判断 if单分支:当一个“条件”成立时执行相应的操作. 语法结构: if 条件: command 流程图: 示例:如果3大于2,那么输出字符串"very good" ...

  6. html---Web Storage存储

    在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端保存如用户名等简单用户信息,但通过长期使用 ...

  7. error: unknown host service 的详细解决办法

    问题情况描述: 有时候,你在cmd 窗口 adb shell 的时候,出现error: unknown host service. 问题解决办法: 这就要怪可恶的360手机助手了,你在任务管理器里面把 ...

  8. 是时候用Coffeescript了

    CoffeeScirpt是什么? CoffeeScript是一门小巧的语言脚本语言,会编译为JavaScript,并且CoffeeScript产生的JavaScript是可以通过JavaScript ...

  9. 剑指Offer - 九度1522 - 包含min函数的栈

    剑指Offer - 九度1522 - 包含min函数的栈2013-12-01 23:44 题目描述: 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 输入: 输入可能包含多个测 ...

  10. Nuget的使用笔记-(使用nuget发布dll到www.nuget.org)

    Nuget是神马东东? 来自nuget.org官方的介绍 ----------------------------------------------------------------------- ...