开发者社区> 问答> 正文

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

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

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

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

后面也开始找其他方案,

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

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

可能要考虑进去的问题

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

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

    2019-07-17 19:14:15
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载