正文 

当前位置： 首页 > java > java框架

快速获取雪碧图的图标样式插件-gulp-css-spriter教程

xiaxue168      2022-02-17     438

关键词：

如何快速把合成好的雪碧图，快速获取图标的样式呢？

用gulp-css-spriter很简单。

第一步: 在某个文件夹用shitf+鼠标右键

技术图片

第二步: npm install gulp-css-spriter

https://www.npmjs.com/package/gulp-css-spriter  (官网gulp插件)

第三步:在gulpfile.js 文件

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工具。

csssprites——雪碧图的使用方法

首先解释下CSSSprites是什么：有称CSS精灵，有称CSS雪碧的，无论叫什么，他的作用就是把网页上很多小图标放到一张图片里面，然后通过CSS里面的background-position来控制每个图片的坐标，这样不但减少http请求，而且还降低了图片的... 查看详情

一些浏览器的兼容和雪碧图的使用

当用li标签包裹住a标签，鼠标经过，让其它元素显示时。要写li:hover  div各种样式而不能写ulli a:hover div各种样式事件代理：为后来添加的元素添加上事件，优化引擎— Gecko内核　　 css前缀为"-moz-"　　 ... 查看详情

web前端啥是雪碧图

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。一、使用雪碧图的优点有以下几点：将多张图片合并到一张图片... 查看详情

多个图标图片（雪碧图）使用css样式显示(代码片段)

现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器... 查看详情

什么是雪碧图？它的优缺点是什么？

雪碧图（Sprites）雪碧图也叫CSS精灵，是一种CSS图像合成技术，就是将许多小图标合并在一张背景透明的图片上，使用background-position和background-size来控制图片显示的区域。为什么要使用雪碧图网站开发90%会用到小图标，多小图标... 查看详情

使用雪碧图（csssprite）

CSS雪碧 即CSSSprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。使用雪碧图的优点有以下几点：将多张图片合并到一张... 查看详情

html+css宝典（五.css基础----更多的样式）

...t、bottom、right、top、bottom数值或百分比：数字可以是负数雪碧图（精灵图）（spirit）:需要小图标合并成一张大图片，大图片就是雪碧图通常用它控制背景图是否固定。fixed:此时背景图是相对于视口的 查看详情

css中雪碧图(sprite)的使用及制作方法

雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用... 查看详情

css雪碧图

...部资源，外部资源都需要浏览器单独发送请求加载， 雪碧图的使用步骤：            1.先确定要使用的图标           &n 查看详情

在rem单位下使用雪碧图实现自适应

参考技术A雪碧图是根据CSSsprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏... 查看详情

sprite(雪碧图)的应用

雪碧图是根据CSSsprite音译过来的，是将很多很多的小图标放在一张图片上。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服... 查看详情

csssprite雪碧图的应用

雪碧图1.静态图片不随用户信息变化而变化2.小图片，图片容量比较小3.加载量比较大一些大图不建议使用雪碧图    工具CssGaga <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>雪碧图导航</title>... 查看详情

雪碧图应用

最近学习了雪碧图的使用，雪碧图的好处这块就不多说了，只说应用部分。雪碧图的使用依赖于background-position这个属性，属性值分别为x,y轴的值，图片的显示大小由容器决定，简单点说，就是承载该图片的大小是多大显示区间... 查看详情

制作雪碧图代码示例

制作雪碧图的辅助工具是ps，先要测出所要的图片的宽高写到代码中去，给它预留位置大小，然后测出所要点击后的图标移动位置的宽高写入代码。                 &nbs... 查看详情

雪碧图制作使用的几种方式！

　　对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！ 　　一、雪碧图制作　　在线生成雪碧图网站　　网站的内容如下：通过点击左侧，我们可以选择一个文件夹，将我们希望... 查看详情

雪碧图制作使用的几种方式！

对前端工程师来说，雪碧图的制作是必须掌握的一门技能，这里主要介绍雪碧图的制作和使用！ 　　一、雪碧图制作　　在线生成雪碧图网站　　网站的内容如下：通过点击左侧，我们可以选择一个文件夹，将我们希望合成... 查看详情

雪碧图的定位

首先需要给li设定一个恰当的固定的宽高比如width:24px;height:24px;<ul>　　<li></li>　　<li></li>　　<li></li>　　<li></li>　　<li></li>　　<li></li></u 查看详情

webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader(代码片段)

...文件夹里添加3张图片3、安装依赖npmispritesmith4、测试合成雪碧图的代码新建test.js文件constSpritesmith=require('spritesmith');constsprites=['./src/img/kaimo-001.png','./src/img/kaimo-002.jpg','./src/img 查看详情