怎樣入門CSSSprites雪碧圖技術(shù)，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺(tái)開發(fā)。

雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對(duì)于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對(duì)內(nèi)存和帶寬更加友好。

實(shí)現(xiàn)
假設(shè)我們通過.toolbtn的類，為應(yīng)用該類的各元素提供一張背景圖片：

CSS Code復(fù)制內(nèi)容到剪貼板

背景位置，可以通過在background的url()直接定義X,Y軸的值，或者通過background-position屬性來添加。例如：

CSS Code復(fù)制內(nèi)容到剪貼板

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假設(shè)這兩個(gè)元素的都添加了toolbtn類，應(yīng)用了上面樣式定義的圖片效果）

類似的，你也可以使用下面的方式添加hover的狀態(tài)：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #btn:hover {background-position: [pixels shifted rightright]px [pixels shifted down]px;}  

CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量。該圖片使用CSS background和background-position屬性渲染(值得一提的是，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非標(biāo)簽)。

使用css-sprite雪碧圖工具
可能是最好用的雪碧圖工具了，好吧，至少是我用過最好用的。

首先安裝css-sprite，安裝這里很坑，等我最后再說。

代碼如下:

npm install css-sprite

我是使用gulp來構(gòu)建前端代碼，所以還需要安裝gulp和gulp-if,安裝好之后就可以開始配置啦。
新建一個(gè)task:

全選復(fù)制放進(jìn)筆記var gulp = require('gulp');

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. var gulpif = require('gulp-if');   
     
   gulp.task('sprites',function(){   
       gulp.src('img/icon/*.png')                  //這是要合并的圖片的路徑   
           .pipe(sprite({   
               name: 'icon',                       //定義一個(gè)名稱   
               style: '_icon.scss',                //這是生成的樣式文件   
               format: 'png',                      //png格式的圖片   
               orientation: 'left-right',          //雪碧圖合并的方向，也可以設(shè)置成垂直或水平   
               cssPath: '#{$icon-sprite-path}',    //雪碧圖的路徑變量   
               template: './sprite-tpl.mustache',  //scss生成的模板   
               processor: 'scss'                   //生成的樣式文件的格式   
           }))   
           .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));   
   });

scss的模板使用mustache：

CSS Code復(fù)制內(nèi)容到剪貼板

1. {{#items}}   
       ${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};   
   {{/items}}   
     
   @mixin sprite-width($sprite) {   
   width: nth($sprite, 3);   
   }   
     
   @mixin sprite-height($sprite) {   
   height: nth($sprite, 4);   
   }   
     
   @mixin sprite-position($sprite) {   
   $sprite-offset-x: nth($sprite, 1);   
   $sprite-offset-y: nth($sprite, 2);   
   background-position: $sprite-offset-x  $sprite-offset-y;   
   }   
     
   @mixin sprite($sprite) {   
   @include sprite-position($sprite);   
     
   @include sprite-width($sprite);   
   @include sprite-height($sprite);   
     
   }   
     
   {{#sprite}}   
       {{class}} {   
       background-repeat: no-repeat;   
       overflow: hidden;   
       border: none;   
       background: url('{{{escaped_image}}}?v=#{$version}');   
       @include inline-block();   
       vertical-align: middle;   
       font-style: normal;   
       color:$icon-font-color;   
       }   
   {{/sprite}}   
     
   {{#items}}   
       .{{name}}{   
       @include sprite(${{name}});   
       }   
   {{/items}}  
   搞定！就是那么簡單。
   現(xiàn)在只需要把圖片丟到icon文件夾里面，運(yùn)行下gulp sprites，就可以生成一張雪碧圖icon.png和相對(duì)應(yīng)的scss樣式文件_icon.scss了，也可以再新建一個(gè)監(jiān)聽的任務(wù)，監(jiān)聽icon文件夾，這樣就可以實(shí)時(shí)生成了。
   我把_icon.scss貼出來：
   CSS Code復(fù)制內(nèi)容到剪貼板
   $icon-qq: -262px -161px 60px 60px;   
   $icon-email: -332px -161px 60px 60px;   
   $icon-skype: -5px -252px 60px 60px;   
   $icon-phone: -75px -252px 60px 60px;   
   @mixin sprite-width($sprite) {   
   width: nth($sprite, 3);   
   }   
     
   @mixin sprite-height($sprite) {   
   height: nth($sprite, 4);   
   }   
     
   @mixin sprite-position($sprite) {   
   $sprite-offset-x: nth($sprite, 1);   
   $sprite-offset-y: nth($sprite, 2);   
   background-position: $sprite-offset-x  $sprite-offset-y;   
   }   
     
   @mixin sprite($sprite) {   
   @include sprite-position($sprite);   
     
   @include sprite-width($sprite);   
   @include sprite-height($sprite);   
     
   }   
   .icon {   
       background-repeat: no-repeat;   
       overflow: hidden;   
       border: none;   
       background: url('#{$icon-sprite-path}/icon.png);   
       @include inline-block();   
       vertical-align: middle;   
       font-style: normal;   
       color:$icon-font-color;   
   }   
   .icon-qq{   
       @include sprite($icon-qq);   
   }   
   .icon-email{   
       @include sprite($icon-email);   
   }   
   .icon-skype{   
       @include sprite($icon-skype);   
   }   
   .icon-phone{   
       @include sprite($icon-phone);   
   }

使用的時(shí)候只需要加上類似class="icon icon-qq"，就可以了。

關(guān)于怎樣入門CSSSprites雪碧圖技術(shù)問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。