CSS Sprites技术

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); //媒体查询 传入图片选项组