欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS Sprites雪碧圖技術(shù)基礎(chǔ)學(xué)習指南

segmentfault   發(fā)布時間：2016-02-29 11:50:12   作者：RayLiao   我要評論
這篇文章主要介紹了CSS Sprites雪碧圖基礎(chǔ)學(xué)習指南,包括對css-sprite雪碧圖工具的用法介紹, 需要的朋友可以參考下

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } </style>  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. #btn1 {background-position: -20px 0px}   
  3. #btn2 {background-position: -40px 0px}   
  4. </style>  

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假設(shè)這兩個元素的都添加了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)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。該圖片使用CSS background和background-position屬性渲染(值得一提的是，這也就意味著你的標簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標簽)。

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

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


復(fù)制代碼
代碼如下:
npm install css-sprite

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

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

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. var gulpif = require('gulp-if');   
  2.   
  3. gulp.task('sprites',function(){   
  4.     gulp.src('img/icon/*.png')                  //這是要合并的圖片的路徑   
  5.         .pipe(sprite({   
  6.             name: 'icon',                       //定義一個名稱   
  7.             style: '_icon.scss',                //這是生成的樣式文件   
  8.             format: 'png',                      //png格式的圖片   
  9.             orientation: 'left-right',          //雪碧圖合并的方向，也可以設(shè)置成垂直或水平   
  10.             cssPath: '#{$icon-sprite-path}',    //雪碧圖的路徑變量   
  11.             template: './sprite-tpl.mustache',  //scss生成的模板   
  12.             processor: 'scss'                   //生成的樣式文件的格式   
  13.         }))   
  14.         .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));   
  15. });  

scss的模板使用mustache：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. {{#items}}   
  2.     ${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};   
  3. {{/items}}   
  4.   
  5. @mixin sprite-width($sprite) {   
  6. width: nth($sprite, 3);   
  7. }   
  8.   
  9. @mixin sprite-height($sprite) {   
  10. height: nth($sprite, 4);   
  11. }   
  12.   
  13. @mixin sprite-position($sprite) {   
  14. $sprite-offset-x: nth($sprite, 1);   
  15. $sprite-offset-y: nth($sprite, 2);   
  16. background-position: $sprite-offset-x  $sprite-offset-y;   
  17. }   
  18.   
  19. @mixin sprite($sprite) {   
  20. @include sprite-position($sprite);   
  21.   
  22. @include sprite-width($sprite);   
  23. @include sprite-height($sprite);   
  24.   
  25. }   
  26.   
  27. {{#sprite}}   
  28.     {{class}} {   
  29.     background-repeat: no-repeat;   
  30.     overflow: hidden;   
  31.     border: none;   
  32.     background: url('{{{escaped_image}}}?v=#{$version}');   
  33.     @include inline-block();   
  34.     vertical-align: middle;   
  35.     font-style: normal;   
  36.     color:$icon-font-color;   
  37.     }   
  38. {{/sprite}}   
  39.   
  40. {{#items}}   
  41.     .{{name}}{   
  42.     @include sprite(${{name}});   
  43.     }   
  44. {{/items}}  

搞定！就是那么簡單。

現(xiàn)在只需要把圖片丟到icon文件夾里面，運行下gulp sprites，就可以生成一張雪碧圖icon.png和相對應(yīng)的scss樣式文件_icon.scss了，也可以再新建一個監(jiān)聽的任務(wù)，監(jiān)聽icon文件夾，這樣就可以實時生成了。

我把_icon.scss貼出來：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. $icon-qq: -262px -161px 60px 60px;   
  2. $icon-email: -332px -161px 60px 60px;   
  3. $icon-skype: -5px -252px 60px 60px;   
  4. $icon-phone: -75px -252px 60px 60px;   
  5. @mixin sprite-width($sprite) {   
  6. width: nth($sprite, 3);   
  7. }   
  8.   
  9. @mixin sprite-height($sprite) {   
  10. height: nth($sprite, 4);   
  11. }   
  12.   
  13. @mixin sprite-position($sprite) {   
  14. $sprite-offset-x: nth($sprite, 1);   
  15. $sprite-offset-y: nth($sprite, 2);   
  16. background-position: $sprite-offset-x  $sprite-offset-y;   
  17. }   
  18.   
  19. @mixin sprite($sprite) {   
  20. @include sprite-position($sprite);   
  21.   
  22. @include sprite-width($sprite);   
  23. @include sprite-height($sprite);   
  24.   
  25. }   
  26. .icon {   
  27.     background-repeat: no-repeat;   
  28.     overflow: hidden;   
  29.     border: none;   
  30.     background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');   
  31.     @include inline-block();   
  32.     vertical-align: middle;   
  33.     font-style: normal;   
  34.     color:$icon-font-color;   
  35. }   
  36. .icon-qq{   
  37.     @include sprite($icon-qq);   
  38. }   
  39. .icon-email{   
  40.     @include sprite($icon-email);   
  41. }   
  42. .icon-skype{   
  43.     @include sprite($icon-skype);   
  44. }   
  45. .icon-phone{   
  46.     @include sprite($icon-phone);   
  47. }  

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

相關(guān)文章

  • 詳解CSS Sprite雪碧圖的應(yīng)用

    這篇文章主要介紹了詳解CSS Sprite雪碧圖的應(yīng)用，CSS雪碧圖該方法是將多個小圖標和背景圖像合并到一張圖片上，非常具有實用價值，需要的朋友可以參考下
    2018-10-31

最新評論