微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

Git@OSC 推荐｜移动端css切片图合成雪碧图工具_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:29:18
原创
1258人浏览过

gulp-css-gmspriter

简单的移动端css切片图合成工具

依赖的工具库：

nodejs

GraphicsMagick 下载地址： http://www.graphicsmagick.org/

python 下载地址： https://www.python.org/

可选的工具库

compass+ruby+sass

立即学习“前端免费学习笔记（深入）”；

主要实现的功能

1.将原型图片进行处理，需要合成的图片目录images/icons/,输出到images/slice/目录下

改图鸭AI图片生成
改图鸭AI图片生成

改图鸭AI图片生成

改图鸭AI图片生成 30
查看详情 改图鸭AI图片生成

images/icons/目录存放2x原型图片

images/slice/目录生成1x，2x图片

2.使用gm工具进行图片缩放

3.使用gulp+gulp-css-spritersmith插件 进行css代码片段的图片合成

4.输出目录publish/

优势

1.不需要更改原来的css文件代码

2.可以配置需要合成的图片源路径，比如：images/icons

3.自动添加media query 移动设备查询代码片段，适应不同的屏幕材质（比如retina）

缺点

1.需要手动输入源切片图的css代码：

.m-icon-fail{    background: url(#{$icon_1_path}/m-pay-err.png) no-repeat;    width:100px;    height:100px;}.m-icon-success{    background: url(#{$icon_1_path}/m-suc.png) no-repeat;    width:28px;    height:28px;}
登录后复制

合成后的代码 

.m-icon-fail { background: no-repeat;background-position: 0 0; width: 100px; height: 100px; }.m-icon-success { background: no-repeat;background-position: 0 -183px; width: 28px; height: 28px; }
登录后复制

示例

下载zip后，执行npm install,再执行gulp 如果没有compass环境，请将gulpfile.js中的compass的配置做相应调整，改成css监听

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：前端那么大，我想去看看_html/css_WEB-ITnose 下一篇：canvas绘画常用方法_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
优化jQuery手风琴：实现多个独立组件的精确控制 本文将深入探讨在使用jQuery实现手风琴（Accordion）组件时，如何解决多个组件之间相互影响或仅第一个组件响应的问题。通过修正jQuery选择器，利用$(this)结合.find()方法，实现对每个手风琴组件内容的精确局部控制，确保每个手风琴都能独立地展开与收起。
2025-11-13 14:55:03
674
JavaScript中生成不重复随机数的有效方法：利用Set数据结构 本教程详细介绍了如何在JavaScript中高效生成一组不重复的随机数。针对传统随机数生成方法可能产生重复值的问题，文章提出并演示了利用Set数据结构自动去重的解决方案。通过迭代向Set中添加随机数直至达到指定数量，确保了结果的唯一性，并提供了完整的代码示例及使用注意事项。
2025-11-13 14:54:35
475
如何在React Native中将SVG路径适配到动态ViewBox 本文深入探讨在ReactNative中使用react-native-svg库时，如何正确地将SVGpath元素适配到动态尺寸的SVGviewBox中。核心在于理解width/height与viewBox的区别，以及如何设置固定的viewBox来确保内部图形的正确缩放，即使SVG容器的尺寸是动态变化的。通过示例代码，我们将演示如何实现SVG图标的自适应布局。
2025-11-13 14:54:01
478
解决iOS Safari/Chrome输入框聚焦时的意外滚动与缩放问题 本文旨在解决iOSSafari/Chrome浏览器中，用户聚焦输入框时可能出现的意外页面滚动或缩放问题。核心原因在于iOS对小于16px字体大小的输入框进行自动放大。教程提供了两种主要解决方案：一是将输入框字体大小设置为16px或更大，二是配置视口元标签maximum-scale=1以限制缩放，并讨论了各自的适用场景和注意事项。
2025-11-13 14:50:41
377
Java Web应用：高效实现多文件ZIP打包与下载 本教程详细阐述了在JavaWeb应用中，如何高效且正确地将多个文件打包成ZIP格式并提供给浏览器下载。文章分析了常见错误，并推荐使用直接流式传输到HTTP响应输出流的方法，结合try-with-resources确保资源妥善管理，避免内存溢出和下载内容不完整的问题，从而实现稳定可靠的文件下载功能。
2025-11-13 14:48:58
123
JavaScript循环中为数组输出项动态生成序号的教程 本教程详细讲解如何在JavaScript中，利用for循环的索引为数组的每个输出项生成唯一的顺序编号。通过简单地将循环索引加一，即可实现从1开始的递增序号，从而清晰、专业地展示列表数据，提升用户界面的可读性。
2025-11-13 14:48:25
448
优化 JavaScript fetch 请求：高效发送表单数据与错误处理 本文深入探讨了如何在使用fetchAPI发送POST请求时，将HTML表单数据（FormData）转换为JSON格式，并结合async/await和try...catch实现健壮的异步通信。文章将详细阐述FormData的默认行为与服务器端对JSON格式的期望之间的差异，提供优化后的代码示例，并强调了正确设置请求头、处理响应以及实施错误捕获的关键实践，旨在帮助开发者构建更可靠、可维护的Web应用程序。
2025-11-13 14:45:01
930
JavaScript/jQuery动态修改DOM对可访问性的影响与最佳实践 本文深入探讨了使用JavaScript/jQuery动态修改DOM对网站可访问性的影响。尽管现代浏览器广泛支持JavaScript，且许多前端框架依赖动态内容生成，但确保可访问性至关重要。核心原则是，对待动态注入的HTML应与静态HTML采用相同的严谨标准，关注标题、表单标签、图片替代文本、ARIA属性以及焦点管理，以确保用户在任何操作阶段都能获得无障碍体验，避免在关键时刻（如交易流程）出现可访问性问题。
2025-11-13 14:41:27
932
VBA将Excel工作表导出为HTML邮件体并保留网络图片链接的实战指南 本文深入探讨了在VBA中将Excel工作表导出为HTML格式并作为Outlook邮件体发送时，如何正确处理内嵌网络图片链接的问题。通过分析两种常见的导出方法及其局限性，文章揭示了一个关键的解决方案：在设置邮件的HTMLBody之前添加附件，可以有效避免图片链接损坏，确保邮件内容完整显示，尤其适用于使用PublishObjects.Add方法生成的HTML。
2025-11-13 14:37:41
610
优化脚本执行：理解 JavaScript 模块与 jQuery DOM 就绪机制 本教程深入探讨了DOM就绪状态、JavaScript模块（ESModules）以及jQuery的$(document).ready()方法之间的关系。核心在于，使用type="module"的脚本会自动延迟执行，这意味着它们会在HTML文档解析完毕后才运行。因此，在ES模块内部使用jQuery的DOM就绪方法是多余的，因为当模块代码开始执行时，DOM已经处于可安全操作的状态。
2025-11-13 14:35:13
483
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部