w3cTrain

Keep Moving

CSS Sprites指的是网页图片的一种处理技巧,普遍使用于各大类型的网站上面,基本上随便打开一个网页,查看资源,你都会看到类似的图片。

http://static.w3ctrain.com/generating-sprites-with-gulp-example2.png

通常是一些体积很小,不常更换的图片,目的很简单,减少HTTP请求次数。

也常用来制作按钮切换状态。
http://static.w3ctrain.com/generating-sprites-with-gulp-example.png

古老的做法

在学gulp之前,我通常会找在线工具来帮我拼图,比如之前提到的spritegen。我只要上传图片,设置一下就能完成,下载下来,在样式表中计算sprite的大小位置。
但是需求是不断变动的(开发阶段图片会经常调整,比如发现图片出现了1px的白边@我们伟大的iOS攻城狮兼UI射鸡湿Pandara_Wen),那么就得重复操作,上传下载替换,上传下载替换,上传下载替换,上传下载替换…当很多次重复操作之后,相信我,你肯定会疯掉的。

Read More...
1