大家是用什么方式生成 CSS sprites 的?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

大家是用什么方式生成 CSS sprites 的?

2016-03-25 14:14:29 1718 1

公司原先是手动合并的, 一个是效率低, 前端和美工工作都比较麻烦,
另一个是图片位置通过手工调整难以保证位置完全正确..
然后我做了两次尝试

Spritesmith
用了 Grunt 插件, 可以定义 CSS 模版. 合并基本是完成.
问题是不支持 Retina, 每次合并又不一样, 比较麻烦.

glue
解决了 Retina 合并的问题, 但是有两个问题,
一个定制性, Grunt 插件文档不清晰, 另外生成的 CSS 可能需要手工定制.
致命的是 Retina 生成的小图片图标质量不过关,
据说说 0.9 可以解决, 但需要手动安装, 我现在还没有尝试.

后面也开始找其他方案,

有推荐 peach, 但文档稍微找了下还没弄明白,
又有找 Fireworks 插件导出 CSS, 目前不熟悉工具也没有尝试..

不知道大家试过的方案有哪些好的?

可能要考虑进去的问题

Grunt 支持或者其他的脚本支持
CDN 部署的文件名和直接合并的不一致, 可能用模版去解决
Retina 的支持, 能生成 backgroupd-position.
Retina 下自动缩放图片而且保持清晰度
工具需要跨平台, 在 OS X 和 Windows 上进行使用

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:14:15

    1.用Fireworks哦~~然后存储以后所有小组件图片都是分离存储在一起的fw.png文件,记得给小组件写position信息存到.txt文档里面,以后维护很方便。
    2.然后PS打开一次打开一次这个文件再另存为另外一个文件夹路径中就可以变成普通整套组件一整张的小体积的.png了。
    3.然后把小体积的上线,大体积的留档以后编辑。

    0 0
相关问答

170

回答

惊喜翻倍:免费ECS+免费环境配置~!(ECS免费体验6个月活动3月31日结束)

豆妹 2014-10-29 17:52:21 234010浏览量 回答数 170

34

回答

【投票】“舌尖”上的更换操作系统

fanyue88888 2012-05-30 20:59:42 112974浏览量 回答数 34

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148150浏览量 回答数 31

34

回答

Win Server 2003-2016 加密勒索事件必打补丁合集

妙正灰 2017-05-15 10:44:38 284047浏览量 回答数 34

39

回答

安全组详解,新手必看教程

我的中国 2017-11-30 15:23:46 263718浏览量 回答数 39

295

回答

Linux Bash严重漏洞修复紧急通知(已全部给出最终修复方案)

qilu 2014-09-25 13:26:50 438531浏览量 回答数 295

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 310447浏览量 回答数 251

97

回答

Redhat/CentOS一键安装web环境全攻略

xiaofanqie 2011-08-11 14:51:38 125104浏览量 回答数 97

23

回答

【精品问答合集】Redis热门问答

李博 bluemind 2019-05-29 16:36:15 131350浏览量 回答数 23

37

回答

【云服务器教程征集令】这个六一阿里云邀您来吐槽!

fanyue88888 2012-06-01 18:55:41 114969浏览量 回答数 37
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载