Windows下使用Glue 生成 CSS spite

2023-10-31 13:59
文章标签 使用 windows css 生成 frontend glue spite

本文主要是介绍Windows下使用Glue 生成 CSS spite，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

为什么80%的码农都做不了架构师？>>>   hot3.png

##Windows下使用Glue 生成 CSS spite 更多平台下的使用方法请参考官网 Glue官网 ###准备工作

  1. 如何本地没有安装Python2.7的话 需要安装一下. Python 2.7.2 Windows installer.
  2. 安装 PIL（Python Imaging Library） (PIL-1.1.7 for Python 2.7)
  3. 安装 Python’s easy_install easy_install for Python 2.7.
  4. 把Python的脚本目录添加到环境变量 PATH 中,添加C:\Python27\Scripts;
  5. Start the cmd and type
    $ easy_install glue

等待命令行完成 在此输入图片描述

###开始工作 准备一个图片的文件夹 ，我这里准备了一个叫 source 的图片目录， 在此输入图片描述 新建一个空目录 sprite 然后使用命令 glue source sprite 生成新的图片的CSS 速度非常之快啊。

生成的文件
在此输入图片描述

生成的图片
在此输入图片描述

css代码：

<!-- lang: css -->
/* glue: 0.3 hash: 3dfa3abe41 */
.sprite-source-9,
.sprite-source-8,
.sprite-source-72,
.sprite-source-71,
.sprite-source-70,
.sprite-source-7,
.sprite-source-69,
.sprite-source-68,
.sprite-source-67,
.sprite-source-66,
.sprite-source-65,
.sprite-source-64,
.sprite-source-63,
.sprite-source-62,
.sprite-source-61,
.sprite-source-60,
.sprite-source-6,
.sprite-source-59,
.sprite-source-58,
.sprite-source-57,
.sprite-source-56,
.sprite-source-55,
.sprite-source-54,
.sprite-source-53,
.sprite-source-52,
.sprite-source-51,
.sprite-source-50,
.sprite-source-5,
.sprite-source-49,
.sprite-source-48,
.sprite-source-47,
.sprite-source-46,
.sprite-source-45,
.sprite-source-44,
.sprite-source-43,
.sprite-source-42,
.sprite-source-41,
.sprite-source-40,
.sprite-source-4,
.sprite-source-39,
.sprite-source-38,
.sprite-source-37,
.sprite-source-36,
.sprite-source-35,
.sprite-source-34,
.sprite-source-33,
.sprite-source-32,
.sprite-source-31,
.sprite-source-30,
.sprite-source-3,
.sprite-source-29,
.sprite-source-28,
.sprite-source-27,
.sprite-source-26,
.sprite-source-25,
.sprite-source-24,
.sprite-source-23,
.sprite-source-22,
.sprite-source-21,
.sprite-source-20,
.sprite-source-2,
.sprite-source-19,
.sprite-source-18,
.sprite-source-17,
.sprite-source-16,
.sprite-source-15,
.sprite-source-14,
.sprite-source-13,
.sprite-source-12,
.sprite-source-11,
.sprite-source-10,
.sprite-source-1{background-image:url('source.png');background-repeat:no-repeat}
.sprite-source-9{background-position:0px 0px;width:16px;height:16px;}
.sprite-source-8{background-position:-16px 0px;width:16px;height:16px;}
.sprite-source-72{background-position:0px -16px;width:16px;height:16px;}
.sprite-source-71{background-position:-16px -16px;width:16px;height:16px;}
.sprite-source-70{background-position:-32px 0px;width:16px;height:16px;}
.sprite-source-7{background-position:-32px -16px;width:16px;height:16px;}
.sprite-source-69{background-position:0px -32px;width:16px;height:16px;}
.sprite-source-68{background-position:-16px -32px;width:16px;height:16px;}
.sprite-source-67{background-position:-32px -32px;width:16px;height:16px;}
.sprite-source-66{background-position:-48px 0px;width:16px;height:16px;}
.sprite-source-65{background-position:-48px -16px;width:16px;height:16px;}
.sprite-source-64{background-position:-48px -32px;width:16px;height:16px;}
.sprite-source-63{background-position:0px -48px;width:16px;height:16px;}
.sprite-source-62{background-position:-16px -48px;width:16px;height:16px;}
.sprite-source-61{background-position:-32px -48px;width:16px;height:16px;}
.sprite-source-60{background-position:-48px -48px;width:16px;height:16px;}
.sprite-source-6{background-position:-64px 0px;width:16px;height:16px;}
.sprite-source-59{background-position:-64px -16px;width:16px;height:16px;}
.sprite-source-58{background-position:-64px -32px;width:16px;height:16px;}
.sprite-source-57{background-position:-64px -48px;width:16px;height:16px;}
.sprite-source-56{background-position:0px -64px;width:16px;height:16px;}
.sprite-source-55{background-position:-16px -64px;width:16px;height:16px;}
.sprite-source-54{background-position:-32px -64px;width:16px;height:16px;}
.sprite-source-53{background-position:-48px -64px;width:16px;height:16px;}
.sprite-source-52{background-position:-64px -64px;width:16px;height:16px;}
.sprite-source-51{background-position:-80px 0px;width:16px;height:16px;}
.sprite-source-50{background-position:-80px -16px;width:16px;height:16px;}
.sprite-source-5{background-position:-80px -32px;width:16px;height:16px;}
.sprite-source-49{background-position:-80px -48px;width:16px;height:16px;}
.sprite-source-48{background-position:-80px -64px;width:16px;height:16px;}
.sprite-source-47{background-position:0px -80px;width:16px;height:16px;}
.sprite-source-46{background-position:-16px -80px;width:16px;height:16px;}
.sprite-source-45{background-position:-32px -80px;width:16px;height:16px;}
.sprite-source-44{background-position:-48px -80px;width:16px;height:16px;}
.sprite-source-43{background-position:-64px -80px;width:16px;height:16px;}
.sprite-source-42{background-position:-80px -80px;width:16px;height:16px;}
.sprite-source-41{background-position:-96px 0px;width:16px;height:16px;}
.sprite-source-40{background-position:-96px -16px;width:16px;height:16px;}
.sprite-source-4{background-position:-96px -32px;width:16px;height:16px;}
.sprite-source-39{background-position:-96px -48px;width:16px;height:16px;}
.sprite-source-38{background-position:-96px -64px;width:16px;height:16px;}
.sprite-source-37{background-position:-96px -80px;width:16px;height:16px;}
.sprite-source-36{background-position:0px -96px;width:16px;height:16px;}
.sprite-source-35{background-position:-16px -96px;width:16px;height:16px;}
.sprite-source-34{background-position:-32px -96px;width:16px;height:16px;}
.sprite-source-33{background-position:-48px -96px;width:16px;height:16px;}
.sprite-source-32{background-position:-64px -96px;width:16px;height:16px;}
.sprite-source-31{background-position:-80px -96px;width:16px;height:16px;}
.sprite-source-30{background-position:-96px -96px;width:16px;height:16px;}
.sprite-source-3{background-position:-112px 0px;width:16px;height:16px;}
.sprite-source-29{background-position:-112px -16px;width:16px;height:16px;}
.sprite-source-28{background-position:-112px -32px;width:16px;height:16px;}
.sprite-source-27{background-position:-112px -48px;width:16px;height:16px;}
.sprite-source-26{background-position:-112px -64px;width:16px;height:16px;}
.sprite-source-25{background-position:-112px -80px;width:16px;height:16px;}
.sprite-source-24{background-position:-112px -96px;width:16px;height:16px;}
.sprite-source-23{background-position:0px -112px;width:16px;height:16px;}
.sprite-source-22{background-position:-16px -112px;width:16px;height:16px;}
.sprite-source-21{background-position:-32px -112px;width:16px;height:16px;}
.sprite-source-20{background-position:-48px -112px;width:16px;height:16px;}
.sprite-source-2{background-position:-64px -112px;width:16px;height:16px;}
.sprite-source-19{background-position:-80px -112px;width:16px;height:16px;}
.sprite-source-18{background-position:-96px -112px;width:16px;height:16px;}
.sprite-source-17{background-position:-112px -112px;width:16px;height:16px;}
.sprite-source-16{background-position:-128px 0px;width:16px;height:16px;}
.sprite-source-15{background-position:-128px -16px;width:16px;height:16px;}
.sprite-source-14{background-position:-128px -32px;width:16px;height:16px;}
.sprite-source-13{background-position:-128px -48px;width:16px;height:16px;}
.sprite-source-12{background-position:-128px -64px;width:16px;height:16px;}
.sprite-source-11{background-position:-128px -80px;width:16px;height:16px;}
.sprite-source-10{background-position:-128px -96px;width:16px;height:16px;}
.sprite-source-1{background-position:-128px -112px;width:16px;height:16px;}

转载于:https://my.oschina.net/redhu/blog/145058

这篇关于Windows下使用Glue 生成 CSS spite的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/315837。

相关文章

python之uv使用详解

python之uv使用详解

《python之uv使用详解》文章介绍uv在Ubuntu上用于Python项目管理,涵盖安装、初始化、依赖管理、运行调试及Docker应用,强调CI中使用--locked确保依赖一致性... 目录安装与更新standalonepip 安装创建php以及初始化项目依赖管理uv run直接在命令行运行pytho
阅读更多...
C#使用Spire.XLS快速生成多表格Excel文件

C#使用Spire.XLS快速生成多表格Excel文件

《C#使用Spire.XLS快速生成多表格Excel文件》在日常开发中,我们经常需要将业务数据导出为结构清晰的Excel文件,本文将手把手教你使用Spire.XLS这个强大的.NET组件,只需几行C#... 目录一、Spire.XLS核心优势清单1.1 性能碾压：从3秒到0.5秒的质变1.2 批量操作的优雅
阅读更多...
Kotlin 枚举类使用举例

Kotlin 枚举类使用举例

《Kotlin枚举类使用举例》枚举类（EnumClasses）是Kotlin中用于定义固定集合值的特殊类,它表示一组命名的常量,每个枚举常量都是该类的单例实例,接下来通过本文给大家介绍Kotl... 目录一、编程枚举类核心概念二、基础语法与特性1. 基本定义2. 带参数的枚举3. 实现接口4. 内置属性三、
阅读更多...
Java List 使用举例(从入门到精通)

Java List 使用举例(从入门到精通)

《JavaList使用举例(从入门到精通)》本文系统讲解JavaList,涵盖基础概念、核心特性、常用实现（如ArrayList、LinkedList）及性能对比,介绍创建、操作、遍历方法,结合实... 目录一、List 基础概念1.1 什么是 List？1.2 List 的核心特性1.3 List 家族成
阅读更多...
Go语言使用Gin处理路由参数和查询参数

Go语言使用Gin处理路由参数和查询参数

《Go语言使用Gin处理路由参数和查询参数》在WebAPI开发中,处理路由参数（PathParameter）和查询参数（QueryParameter）是非常常见的需求,下面我们就来看看Go语言... 目录一、路由参数 vs 查询参数二、Gin 获取路由参数和查询参数三、示例代码四、运行与测试1. 测试编程路
阅读更多...
Python使用python-pptx自动化操作和生成PPT

Python使用python-pptx自动化操作和生成PPT

《Python使用python-pptx自动化操作和生成PPT》这篇文章主要为大家详细介绍了如何使用python-pptx库实现PPT自动化,并提供实用的代码示例和应用场景,感兴趣的小伙伴可以跟随小编... 目录使用python-pptx操作PPT文档安装python-pptx基础概念创建新的PPT文档查看
阅读更多...
C#和Unity中的中介者模式使用方式

C#和Unity中的中介者模式使用方式

《C#和Unity中的中介者模式使用方式》中介者模式通过中介者封装对象交互,降低耦合度,集中控制逻辑,适用于复杂系统组件交互场景,C#中可用事件、委托或MediatR实现,提升可维护性与灵活性... 目录C#中的中介者模式详解一、中介者模式的基本概念1. 定义2. 组成要素3. 模式结构二、中介者模式的特点
阅读更多...
MySQL中优化CPU使用的详细指南

MySQL中优化CPU使用的详细指南

《MySQL中优化CPU使用的详细指南》优化MySQL的CPU使用可以显著提高数据库的性能和响应时间,本文为大家整理了一些优化CPU使用的方法,大家可以根据需要进行选择... 目录一、优化查询和索引1.1 优化查询语句1.2 创建和优化索引1.3 避免全表扫描二、调整mysql配置参数2.1 调整线程数2.
阅读更多...
C#中SortedSet的具体使用

C#中SortedSet的具体使用

《C#中SortedSet的具体使用》SortedSet是.NETFramework4.0引入的一个泛型集合类,它实现了一个自动排序的集合,内部使用红黑树数据结构来维护元素的有序性,下面就来介绍一下如... 目录基础概念主要特性创建和初始化基本创建方式自定义比较器基本操作添加和删除元素查询操作范围查询集合运
阅读更多...
C# Opacity 不透明度的具体使用

C# Opacity 不透明度的具体使用

《C#Opacity不透明度的具体使用》本文主要介绍了C#Opacity不透明度的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录WinFormsOpacity以下是一些使用Opacity属性的示例：设置窗体的透明度：设置按钮的透
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2