4.6. CSS Sprite

简介:
		
简介
gulp-spriter:帮助前端工程师将css代码中的切片图片合并成雪碧图,支持retina图片。

功能
使用二叉树排列算法,对图片排序优化
自动收集css中带切片的图片(仅对background-image:url("slice/xx.png")有效)
自动在原来的css中添加background-position属性
支持生成适用于高清设备的雪碧图,并在css文件追加媒体查询css代码
依赖
gulp-spriter使用spritesmith作为图片生成的基础算法

安装
npm install gulp-spriter
配置
导入gulp-spriter依赖:

var spriter = require("gulp-spriter");
 
gulpfile配置文件中增加task,如下:

gulp.task("css",["clean"],function(){
  return gulp.src("./src/css/xxx.css")
         .pipe(spriter({
            sprite:"test.png",
            slice:"./src/slice",
            outpath:"./build/tests"
          }))
         .pipe(gulp.dest('./build/css'))
})
参数
sprite:[string] 必须,设置输出的雪碧图名称
slice:[string] 必须,切片文件存放位置,基于根目录
outpath:[string] 必须,输出的雪碧图位置
		
		
		
		





原文出处:Netkiller 系列 手札
本文作者:陈景峯
转载请与作者联系,同时请务必标明文章原始出处和作者信息及本声明。

目录
相关文章
|
2月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
18 1
|
2月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
前端开发
CSS Sprite 优点
CSS Sprite 优点自制脑图
50 0
CSS Sprite 优点
|
前端开发
CSS——CSS精灵技术(sprite)※
CSS——CSS精灵技术(sprite)※
187 0
CSS——CSS精灵技术(sprite)※
|
前端开发
css sprite雪碧图制作,使用以及相关,图文gif。
在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。 实现原理: CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义.
264 0
css sprite雪碧图制作,使用以及相关,图文gif。
|
Web App开发 前端开发 .NET
一起谈.NET技术,在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
  前几天MS的ASP.NET小组推出了一个小组件:Sprite and Image Optimization Framework,用于生成Sprite CSS,及将小的图片生成一副大图。   下载地址:http://aspnet.codeplex.com/releases/view/50140   8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59   下载后工程中有一个类库,一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。
1293 0
|
Web App开发 前端开发
|
前端开发
CSS雪碧,即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS。 HTML代码 .img{background:url(img.
876 0
|
前端开发
CSS Sprite雪碧图使用场景-慕课网
来源:http://www.imooc.com/video/1317#0-hi-1-36977-89fdc647f52c5196c0d5da60d38d89ea
1075 0
|
前端开发 .NET 开发框架
在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
前几天MS的ASP.NET小组推出了一个小组件:Sprite and Image Optimization Framework,用于生成Sprite CSS,及将小的图片生成一副大图。 下载地址:http://aspnet.codeplex.com/releases/view/50140 8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59 下载后工程中有一个类库,一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。
1055 0

热门文章

最新文章

相关产品