Css雪碧圖

Css雪碧圖： CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

原理：CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。

如何生成雪碧圖？

1. 安裝gulp插件： npm install –g gulp
2. 安裝製做雪碧圖須要的插件 npm install –g gulp.spritesmith

最好全局和本地各裝一遍；

    新建一個Gulpfile.js文件，將下列代碼放進去：
        var gulp=require('gulp');   //引入這兩個gulp  gulp.spritesmith
            spritesmith=require('gulp.spritesmith');  
          
        gulp.task('default',function(){   //新建名爲sprite的任務
             gulp.src('images/*.png')  //須要合成的圖片路徑  *爲通配符  表示這個文件夾下面全部後綴爲.png的文件都會被應用
                .pipe(spritesmith({  
    imgName:'sprite.png',//合成後須要保存圖片的路徑 
    cssName:'sprite.css',  //合成後須要保存的css的路徑
    padding:5,  //表示兩個圖片間的空隙
    algorithm:'binary-tree', // Algorithm 有四個可選值分別爲top-down、left-right、diagonal、alt-diagonal、binary-tree
    // cssTemplate:'dist/handlebarsStr.css' //生成的css模板文件，能夠是函數也能夠是字符串
    }))  
    .pipe(gulp.dest('dist/')) //將生成的文件放到dist文件夾下 
    })  

 

或者：

進入項目 npm init 輸入須要的信息，建立一個package.json文件：

{

  "name": "package.json",

  "version": "1.0.0",

  "description": "",

  "main": "Gulpfile.js",

  "dependencies": {

    "gulp": "^3.9.1",

    "gulp.spritesmith": "^6.5.1"

  },

  "devDependencies": {},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

 

這裏提幾點須要注意的：

    須要一個Gulpfile.js（首字母小寫也能夠） ，運行時執行 gulp default（defaullt是你新建的任務名，不是固定的，你寫成其餘也行）
      imgName:'sprite.png',//合成後須要保存圖片的路徑
      cssName:'sprite.css',

  這兩個文件須要你先建立，裏面的文件都要預先建立；

  我這裏是放在dist下面就要在dis下面建立這兩個文件

合成的雪碧圖；

 

css樣式：

.icon-1  {

  background-image: url(sprite.png);

  background-position: 0px 0px;

  width: 33px;

  height: 33px;

}

.icon-2 {

  background-image: url(sprite.png);

  background-position: -38px 0px;

  width: 33px;

  height: 33px;

}

.icon-3 {

  background-image: url(sprite.png);

  background-position: 0px -38px;

  width: 33px;

  height: 33px;

}

.icon-4 {

  background-image: url(sprite.png);

  background-position: -38px -38px;

  width: 33px;

  height: 33px;

}

.icon-5 {

  background-image: url(sprite.png);

  background-position: -76px 0px;

  width: 33px;

  height: 33px;

}

.icon-6 {

  background-image: url(sprite.png);

  background-position: -76px -38px;

  width: 33px;

  height: 33px;

}

.icon-7 {

  background-image: url(sprite.png);

  background-position: 0px -76px;

  width: 33px;

  height: 33px;

}

 

algorithm：四個參數只是決定圖片的排列順序；

top-down：

具體的參數能夠看這裏：

好了，雪碧圖就合成啦；

下面會講講如何使用雪碧圖；

建立一個文件：index.html

引入生成的css

    <link rel="stylesheet" type="text/css" href="./dist/sprite.css" />

 寫基本架構：class="icon-1"  這裏是css裏生成的樣式名；按順序寫好就行；

  <ul class="sprite">
        <li>
            <s class="icon-1"></s>
            <a href="">衣服</a>
        </li>
        <li>
            <s class="icon-2"></s>
            <a href="">鞋子</a>
        </li>
        <li>
            <s class="icon-3"></s>
            <a href="">揹包</a>
        </li>
        <li>
            <s class="icon-4"></s>
            <a href="">雙肩包</a>
        </li>
        <li>
            <s class="icon-5"></s>
            <a href="">褲子</a>
        </li>
          <li>
            <s class="icon-6"></s>
            <a href="">羽絨服</a>
        </li>
          <li>
            <s class="icon-7"></s>
            <a href="">外套</a>
        </li>
    </ul>

 給他們新增長一些樣式：

<style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .sprite {
            margin: 10px auto;
            width: 206px;
            border: 1px solid #b51600;
        }

        .sprite li {
            cursor: pointer;
            height: 42px;
            width: 206px;
            background-color: #b51600;
            border-bottom: 1px solid #911001;
            border-top: 1px solid #c11e08;
        }

        .sprite li a {
            color: #fff;
            line-height: 42px;
            font-size: 14px;
        }

 效果就是這樣：

引入了css文件，class也改動了，怎麼沒有圖標呢？

生成的css文件裏面就告訴你了，讓標籤dispay:block；

  .sprite li s{      
            display: inline-block;
            margin-left: 10px;
            margin-right: 8px;
        }

 看看效果：