关键词：
用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工具)
合并字体图标
...，由于项目需要不断增加，不想用雪碧图，那么要把字体图标合并在一起而又不影响呢？难道把在阿里的里的项目合并在一起再重新下载，可是还有些是从其他的获取的图标那怎么办？？？为了易管理，合并同一起是最适合的！... 查看详情
在rem单位下使用雪碧图实现自适应
...技术A雪碧图是根据CSSsprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器... 查看详情
sprite(雪碧图)的应用
雪碧图是根据CSSsprite音译过来的，是将很多很多的小图标放在一张图片上。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服... 查看详情
css中雪碧图(sprite)的使用及制作方法
...时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用首先确定要使用的图标的位置和大小（可以通过ps测量），如下的雪碧图大小统... 查看详情
怎么把电脑桌面图标做成电子版的？
参考技术A先截屏，再到PS中粘贴处理。 查看详情
快速获取雪碧图的图标样式插件-gulp-css-spriter教程
如何快速把合成好的雪碧图，快速获取图标的样式呢？用gulp-css-spriter很简单。第一步:在某个文件夹用shitf+鼠标右键第二步: npminstallgulp-css-spriterhttps://www.npmjs.com/package/gulp-css-spriter (官网gulp插件)第三步:在gulpfile.js文件vargul... 查看详情
web前端啥是雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。一、使用雪碧图的优点有以下几点：将多张图片合并到一张图片... 查看详情
sprite学习
CSS雪碧图，就是把所有的图表，按钮和图形包含在一个图像里面。它要求：静态图片，不随用户信息变化而变化；小图片，图片容量比较小；加载量比较大。使用这种技术可以减少Web浏览器发出的服务器请求，显著加快下载速度... 查看详情
css雪碧图及jquery定位代码
...相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片 查看详情
雪碧图布局(代码片段)
...件设置动画类型，而每种动画类型都需要一个对应的动画图标，这里就使用了雪碧图。一、什么是雪碧图百度百科：CSS雪碧即CSSSprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上... 查看详情
磁盘图标diy：把你的女神图片做成磁盘图标
一般情况下，电脑磁盘图标就是个磁盘：而本教程，可以教你如何把任何图片做成磁盘图标，包括用你心中的女神图片。最终效果是： 制作过程：1、需要用到一个软件：Ty2y图标制作，用这个软件将图片转化成ico图标文件。... 查看详情
怎样把柱状图和折线图合并一起
...系列，一部分生成柱状图，另一部分生成折线图。可先将所有系列生成柱状图，然后用鼠标选中需要改成折线图的系列，点右键选“图表类型”，从弹出的窗口中选折线图，确定即可。参考技术A先做成两个系列的柱形图，然后... 查看详情
把select的小图标替换成自己想要的图片
不同的浏览器默认的select的选项图标是不同的，例如：在chrome中，是这样的：未点击时 点击时 在Firefox中是这样的：未点击时 点击时 在IE9中是这样的：未点击时 点击时 其它浏览器大家可以自己... 查看详情
csssprites——雪碧图的使用方法
...称CSS雪碧的，无论叫什么，他的作用就是把网页上很多小图标放到一张图片里面，然后通过CSS里面的background-position来控制每个图片的坐标，这样不但减少http请求，而且还降低了图片的大小，加快图片的加载速度，对前端开发的... 查看详情
gulp填坑记——gulp多张图片自动合成雪碧图
为优化图片，减少请求会把拿到切好的图标图片，通过ps（或者其他工具）把图片合并到一张图里面，再通过css定位把对于的样式写出来引用的html里面，对于一些图片较多的项目，这个过程可能要花费我们一天的时间，来实现这... 查看详情
多个图标图片（雪碧图）使用css样式显示(代码片段)
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器... 查看详情
雪碧图（图片拼合技术）
...");3.移动位置background-position:x轴坐标y轴坐标；优点：将小图标拼合到一张图片里，占用内存少，对开发人员来说就不用麻烦给每个小图标命名，还可以有效地加快网页的加载速度，可以有效增强用户体验；缺点：需要利用相关图... 查看详情
什么是雪碧图？它的优缺点是什么？
...碧图也叫CSS精灵，是一种CSS图像合成技术，就是将许多小图标合并在一张背景透明的图片上，使用background-position和background-size来控制图片显示的区域。为什么要使用雪碧图网站开发90%会用到小图标，多小图标调用显示是前端开... 查看详情