CSS Sprites雪碧图技术性基本学习培训指南

日期：2020-12-12 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

前言
雪碧图被应用在诸多应用了许多小标志的网站上。相对把每张小标志以.png文件格式文档的方式引入到网页页面上，应用雪碧图只必须引入1张照片，对运行内存和带宽更为友善。

完成
假定大家根据.toolbtn的类，为运用该类的各元素出示1张情况照片：

CSS Code拷贝內容到剪贴板
  1. <style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } </style>  

情况部位，能够根据在background的url()立即界定X,Y轴的值，或根据background-position特性来加上。比如：

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. #btn1 {background-position: -20px 0px}   
  3. #btn2 {background-position: -40px 0px}   
  4. </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雪碧的基础基本原理是把你的网站上用到的1些照片整合到1张独立的照片中，从而降低你的网站的HTTP恳求数量。该照片应用CSS background和background-position特性3D渲染(值得1提的是，这也就代表着你的标识变得更为繁杂了，照片是在CSS中界定，而非<img>标识)。

应用css-sprite雪碧图专用工具
将会是最好是用的雪碧图专用工具了，好吧，最少是我用过最好是用的。

最先安裝css-sprite，安裝这里很坑，等我最终再说。


拷贝编码
编码以下:
npm install css-sprite

我是应用gulp来搭建前端开发编码，因此还必须安裝gulp和gulp-if,安裝好以后便可以刚开始配备啦。
新建1个task:

全选拷贝放进笔记var gulp = require('gulp');

JavaScript Code拷贝內容到剪贴板
  1. var gulpif = require('gulp-if');   
  2.   
  3. gulp.task('sprites',function(){   
  4.     gulp.src('img/icon/*.png')                  //这是要合拼的照片的相对路径   
  5.         .pipe(sprite({   
  6.             name: 'icon',                       //界定1个名字   
  7.             style: '_icon.scss',                //这是转化成的款式文档   
  8.             format: 'png',                      //png文件格式的照片   
  9.             orientation: 'left-right',          //雪碧图合拼的方位，还可以设定成竖直或水平   
  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拷贝內容到剪贴板
  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}}  

搞定！便是那末简易。

如今只必须把照片丢到icon文档夹里边，运作下gulp sprites，便可以转化成1张雪碧图icon.png和相对性应的scss款式文档_icon.scss了，还可以再新建1个监视的每日任务，监视icon文档夹，这样便可以即时转化成了。

我把_icon.scss贴出来：

CSS Code拷贝內容到剪贴板
  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"，便可以了。

上一篇：css制做黑色經典导航栏往下拉菜单 返回下一篇：应用CSS完成正中间镂空的照片遮罩实际效果