CSS Sprites雪碧图技术基础学习指南

弱柳千条杏一枝,半含春雨半垂丝。风景再美,若没人一起欣赏,也会有种莫名的忧伤。满山满谷乳白色的雾气,那样的深,那样的浓,像流动的浆液,能把人浮起来似的。

引言
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。

实现
假设我们通过.toolbtn的类,为应用该类的各元素提供一张背景图片:

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:-20px0px}
  3. #btn2{background-position:-40px0px}
  4. </style>

id=btn1的元素背景左移20px,id=btn2的元素背景左移40px(假设这两个元素的都添加了toolbtn类,应用了上面样式定义的图片效果)

类似的,你也可以使用下面的方式添加hover的状态:

CSS Code复制内容到剪贴板
  1. #btn:hover{background-position:[pixelsshiftedrightright]px[pixelsshifteddown]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. vargulpif=require('gulp-if');
  2. gulp.task('sprites',function(){
  3. gulp.src('img/icon/*.png')//这是要合并的图片的路径
  4. .pipe(sprite({
  5. name:'icon',//定义一个名称
  6. style:'_icon.scss',//这是生成的样式文件
  7. format:'png',//png格式的图片
  8. orientation:'left-right',//雪碧图合并的方向,也可以设置成垂直或水平
  9. cssPath:'#{$icon-sprite-path}',//雪碧图的路径变量
  10. template:'./sprite-tpl.mustache',//scss生成的模板
  11. processor:'scss'//生成的样式文件的格式
  12. }))
  13. .pipe(gulpif('*.png',gulp.dest('img/'),gulp.dest('css/')));
  14. });

scss的模板使用mustache:

CSS Code复制内容到剪贴板
  1. {{#items}}
  2. ${{name}}:{{px.offset_x}}{{px.offset_y}}{{px.width}}{{px.height}};
  3. {{/items}}
  4. @mixinsprite-width($sprite){
  5. width:nth($sprite,3);
  6. }
  7. @mixinsprite-height($sprite){
  8. height:nth($sprite,4);
  9. }
  10. @mixinsprite-position($sprite){
  11. $sprite-offset-x:nth($sprite,1);
  12. $sprite-offset-y:nth($sprite,2);
  13. background-position:$sprite-offset-x$sprite-offset-y;
  14. }
  15. @mixinsprite($sprite){
  16. @includesprite-position($sprite);
  17. @includesprite-width($sprite);
  18. @includesprite-height($sprite);
  19. }
  20. {{#sprite}}
  21. {{class}}{
  22. background-repeat:no-repeat;
  23. overflow:hidden;
  24. border:none;
  25. background:url('{{{escaped_image}}}?v=#{$version}');
  26. @includeinline-block();
  27. vertical-align:middle;
  28. font-style:normal;
  29. color:$icon-font-color;
  30. }
  31. {{/sprite}}
  32. {{#items}}
  33. .{{name}}{
  34. @includesprite(${{name}});
  35. }
  36. {{/items}}

搞定!就是那么简单。

现在只需要把图片丢到icon文件夹里面,运行下gulp sprites,就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了,也可以再新建一个监听的任务,监听icon文件夹,这样就可以实时生成了。

我把_icon.scss贴出来:

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

使用的时候只需要加上类似class="icon icon-qq",就可以了。

本文CSS Sprites雪碧图技术基础学习指南到此结束。总是在疼过之后,才能学会做一个全新的自己。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题