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 系列 手札
本文作者:陈景峯
转载请与作者联系,同时请务必标明文章原始出处和作者信息及本声明。

目录
相关文章
|
3月前
|
编解码 缓存 前端开发
什么是CSS Sprite
【7月更文挑战第14天】 **CSS Sprite** 是一种图像合并技术,通过将多个图标整合到一张大图并利用CSS背景定位显示所需部分,减少HTTP请求,提升页面加载速度和降低服务器压力。优点包括减少请求次数、降低服务器负担、加快速度和简化图片管理,但制作与维护成本高且定位复杂。使用工具可降低工作难度,适应不同分辨率设备。需权衡利弊适时应用。
41 1
|
5月前
|
前端开发
什么是CSS Sprite,以及如何在页面或网站中使用它
什么是CSS Sprite,以及如何在页面或网站中使用它
75 1
|
5月前
|
前端开发
css sprite 的优缺点,使用方法和示例
css sprite 的优缺点,使用方法和示例
60 1
|
10月前
|
Web App开发 前端开发 容器
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
|
前端开发
CSS Sprite 优点
CSS Sprite 优点自制脑图
74 0
CSS Sprite 优点
|
前端开发
CSS——CSS精灵技术(sprite)※
CSS——CSS精灵技术(sprite)※
237 0
CSS——CSS精灵技术(sprite)※
|
前端开发
css sprite雪碧图制作,使用以及相关,图文gif。
在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。 实现原理: CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义.
323 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示例。
1378 0
|
Web App开发 前端开发
|
前端开发
CSS雪碧,即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS。 HTML代码 .img{background:url(img.
900 0