把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.
用gulp-css-spriter很简单。
第一步: 在某个文件夹用shitf+鼠标右键
第二步: npm install gulp-css-spriter
https://www.npmjs.com/package/gulp-css-spriter (官网gulp插件)
第三步:在gulpfile.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var gulp = require( 'gulp' ); var spriter = require( 'gulp-css-spriter' ); gulp.task( 'css' , function() { return gulp.src( './css/recharge.css' ) //比如recharge.css这个样式里面什么都不用改,是你想要合并的图就要引用这个样式。 很重要 注意(recharge.css)这个是我的项目。别傻到家抄我一样的。 .pipe(spriter({ // The path and file name of where we will save the sprite sheet 'spriteSheet' : './dist/images/spritesheet.png' , //这是雪碧图自动合成的图。 很重要 // Because we don't know where you will end up saving the CSS file at this point in the pipe, // we need a litle help identifying where it will be. 'pathToSpriteSheetFromCSS' : '../images/spritesheet.png' //这是在css引用的图片路径,很重要 })) .pipe(gulp.dest( './dist/css' )); //最后生成出来 }); |
第四步:打开生成的dist/css
这是合并之后的雪碧图
这是之前的所有图。 被我用并成上上面的雪碧图。很爽吧?
再看看生成后的css, 突然多出了什么。请看我红标注。多了定位。之前是没有这个定位。
注( 使用gulp-css-spriter之前要安装node.js和gulp工具)
把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.的更多相关文章
- 图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...
- 多个图标图片(雪碧图)使用CSS样式显示
现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
- 雪碧图和如何实现浏览器中title的小图标
background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求 ser href url 2.overflow (1) 值hidden 超出就隐藏 (2)值sc ...
- 关于css雪碧图sprite
天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- 方便前端使用的SVG雪碧图
更多代码详情:github.crmeb.net/u/LXT 简介 由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率.不用担心模糊和锯齿.同时还能更改图标的填充 ...
- css背景雪碧图等
1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...
随机推荐
- MVC5 知识点记录
http://blog.csdn.net/qinkeliangqin/article/details/27084639#t27 一.概述 MVC简介: • 模型(Model) “数据模型” ...
- 第9章 scrapy-redis分布式爬虫
9-1 分布式爬虫要点 1.分布式的优点 充分利用多机器的宽带加速爬取 充分利用多机的IP加速爬取速度 问:为什么scrapy不支持分布式? 答:在scrapy中scheduler是运行在队列的,而队 ...
- C#三大特性之 封装、继承、多态
一.封装: 封装是实现面向对象程序设计的第一步,封装就是将数据或函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型. 封装的意义: 封装的意义在于保护或者防止代码(数据) ...
- 怎么让一段xml被识别为字符串
public static String decodeString(String strData) { strData = replaceString(strData, "<" ...
- java语言的各种输入情况(ACM常用)
1.只输入一组数据: Scanner s=new Scanner(System.in); int a=s.nextInt(); int b=s.nextInt(); 2.输入有多组数据,没有说明输入几 ...
- CF891E Lust
传送门 题目大意 你有 \(n\) 个数 \(a_1,a_2...a_n\) 要进行 \(k\) 次操作 每次随机选择一个数 \(x\),使得答案加上 \(\prod_{i \neq x}a_i\) ...
- iView定制主题报错问题的解决方法
按照iView官网来是这样的: 1. 在main.js当前目录下新建themes文件夹,里面新建一个叫blue.less的文件 2. 在mian.js里面引入blue.less文件 3. blue.l ...
- MySQL图形化界面SQLyog
软件地址:SQLyog 密码: mmaf
- Web开发须知的浏览器内幕 缓存与存储篇(1)
本文禁止转载,由UC浏览器内部出品. 0.前言 大纲 浏览器缓存和存储相关的功能分为四类: 加载流程 Memory Cache Application Cache(简称AppCache) HTTP C ...
- 【转载记录】Accessing Device Drivers from C#
来源:http://www.drdobbs.com/cpp/accessing-device-drivers-from-c/184416423/ Device Drivers are writte ...