怎樣入門CSSSprites雪碧圖技術

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

雪碧圖被運用在眾多使用了很多小圖標的網站上。相對于把每張小圖標以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內存和帶寬更加友好。

實現
假設我們通過.toolbtn的類，為應用該類的各元素提供一張背景圖片：

CSS Code復制內容到剪貼板

<style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px} </style>

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

CSS Code復制內容到剪貼板

<style>   
#btn1 {background-position: -20px 0px}   
#btn2 {background-position: -40px 0px}   
</style>

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

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

CSS Code復制內容到剪貼板

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

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

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

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

代碼如下:

npm install css-sprite

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

全選復制放進筆記var gulp = require('gulp');

JavaScript Code復制內容到剪貼板

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

scss的模板使用mustache：

CSS Code復制內容到剪貼板

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}}  
   搞定！就是那么簡單。
   現在只需要把圖片丟到icon文件夾里面，運行下gulp sprites，就可以生成一張雪碧圖icon.png和相對應的scss樣式文件_icon.scss了，也可以再新建一個監聽的任務，監聽icon文件夾，這樣就可以實時生成了。
   我把_icon.scss貼出來：
   CSS Code復制內容到剪貼板
   $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?v=#{$version}');   
       @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);   
   }

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

關于怎樣入門CSSSprites雪碧圖技術問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。