Windows下使用Glue 生成：CSS spite

Glue 是一个简单的命令行工具，用来生成 CSS 精灵 Splites。CSS Splites 是将大量的图片合并成一张大图片一次性加载，然后通过 CSS 来使用具体某个小图片的技术。

特点：

Automatic Sprite (PNG+CSS) creation.
Automatic multi-dpi retina sprite creation.
Support for multi-sprite projects.
Create sprites from multiple folders.
Multiple algorithms available.
Automatic crop of unnecessary transparent borders around source images.
Configurable paddings per image, sprite or project.
Watch option to keep glue running watching for file changes.
Optional .less output format.
Automatic sprite images post-processing using OptiPNG.
Sprite- and Project-level configuration via static config files.
Configurable cache busting for sprite images.
Customizable output css templates.
Customizable CSS class names.

更多平台下的使用方法请参考官网 Glue官网

准备工作

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

等待命令行完成

开始工作

准备一个图片的文件夹，我这里准备了一个叫 source 的图片目录，

新建一个空目录 sprite 然后使用命令 glue source sprite 生成新的图片的CSS 速度非常之快啊。

生成的文件

生成的图片

css代码：

001 /* glue: 0.3 hash: 3dfa3abe41 */

002 .sprite-source-9,

003 .sprite-source-8,

004 .sprite-source-72,

005 .sprite-source-71,

006 .sprite-source-70,

007 .sprite-source-7,

008 .sprite-source-69,

009 .sprite-source-68,

010 .sprite-source-67,

011 .sprite-source-66,

012 .sprite-source-65,

013 .sprite-source-64,

014 .sprite-source-63,

015 .sprite-source-62,

016 .sprite-source-61,

017 .sprite-source-60,

018 .sprite-source-6,

019 .sprite-source-59,

020 .sprite-source-58,

021 .sprite-source-57,

022 .sprite-source-56,

023 .sprite-source-55,

024 .sprite-source-54,

025 .sprite-source-53,

026 .sprite-source-52,

027 .sprite-source-51,

028 .sprite-source-50,

029 .sprite-source-5,

030 .sprite-source-49,

031 .sprite-source-48,

032 .sprite-source-47,

033 .sprite-source-46,

034 .sprite-source-45,

035 .sprite-source-44,

036 .sprite-source-43,

037 .sprite-source-42,

038 .sprite-source-41,

039 .sprite-source-40,

040 .sprite-source-4,

041 .sprite-source-39,

042 .sprite-source-38,

043 .sprite-source-37,

044 .sprite-source-36,

045 .sprite-source-35,

046 .sprite-source-34,

047 .sprite-source-33,

048 .sprite-source-32,

049 .sprite-source-31,

050 .sprite-source-30,

051 .sprite-source-3,

052 .sprite-source-29,

053 .sprite-source-28,

054 .sprite-source-27,

055 .sprite-source-26,

056 .sprite-source-25,

057 .sprite-source-24,

058 .sprite-source-23,

059 .sprite-source-22,

060 .sprite-source-21,

061 .sprite-source-20,

062 .sprite-source-2,

063 .sprite-source-19,

064 .sprite-source-18,

065 .sprite-source-17,

066 .sprite-source-16,

067 .sprite-source-15,

068 .sprite-source-14,

069 .sprite-source-13,

070 .sprite-source-12,

071 .sprite-source-11,

072 .sprite-source-10,

073 .sprite-source-1{background-image:url('source.png');background-repeat:no-repeat}

074 .sprite-source-9{background-position:0px 0px;width:16px;height:16px;}

075 .sprite-source-8{background-position:-16px 0px;width:16px;height:16px;}

076 .sprite-source-72{background-position:0px -16px;width:16px;height:16px;}

077 .sprite-source-71{background-position:-16px -16px;width:16px;height:16px;}

078 .sprite-source-70{background-position:-32px 0px;width:16px;height:16px;}

079 .sprite-source-7{background-position:-32px -16px;width:16px;height:16px;}

080 .sprite-source-69{background-position:0px -32px;width:16px;height:16px;}

081 .sprite-source-68{background-position:-16px -32px;width:16px;height:16px;}

082 .sprite-source-67{background-position:-32px -32px;width:16px;height:16px;}

083 .sprite-source-66{background-position:-48px 0px;width:16px;height:16px;}

084 .sprite-source-65{background-position:-48px -16px;width:16px;height:16px;}

085 .sprite-source-64{background-position:-48px -32px;width:16px;height:16px;}

086 .sprite-source-63{background-position:0px -48px;width:16px;height:16px;}

087 .sprite-source-62{background-position:-16px -48px;width:16px;height:16px;}

088 .sprite-source-61{background-position:-32px -48px;width:16px;height:16px;}

089 .sprite-source-60{background-position:-48px -48px;width:16px;height:16px;}

090 .sprite-source-6{background-position:-64px 0px;width:16px;height:16px;}

091 .sprite-source-59{background-position:-64px -16px;width:16px;height:16px;}

092 .sprite-source-58{background-position:-64px -32px;width:16px;height:16px;}

093 .sprite-source-57{background-position:-64px -48px;width:16px;height:16px;}

094 .sprite-source-56{background-position:0px -64px;width:16px;height:16px;}

095 .sprite-source-55{background-position:-16px -64px;width:16px;height:16px;}

096 .sprite-source-54{background-position:-32px -64px;width:16px;height:16px;}

097 .sprite-source-53{background-position:-48px -64px;width:16px;height:16px;}

098 .sprite-source-52{background-position:-64px -64px;width:16px;height:16px;}

099 .sprite-source-51{background-position:-80px 0px;width:16px;height:16px;}

100 .sprite-source-50{background-position:-80px -16px;width:16px;height:16px;}

101 .sprite-source-5{background-position:-80px -32px;width:16px;height:16px;}

102 .sprite-source-49{background-position:-80px -48px;width:16px;height:16px;}

103 .sprite-source-48{background-position:-80px -64px;width:16px;height:16px;}

104 .sprite-source-47{background-position:0px -80px;width:16px;height:16px;}

105 .sprite-source-46{background-position:-16px -80px;width:16px;height:16px;}

106 .sprite-source-45{background-position:-32px -80px;width:16px;height:16px;}

107 .sprite-source-44{background-position:-48px -80px;width:16px;height:16px;}

108 .sprite-source-43{background-position:-64px -80px;width:16px;height:16px;}

109 .sprite-source-42{background-position:-80px -80px;width:16px;height:16px;}

110 .sprite-source-41{background-position:-96px 0px;width:16px;height:16px;}

111 .sprite-source-40{background-position:-96px -16px;width:16px;height:16px;}

112 .sprite-source-4{background-position:-96px -32px;width:16px;height:16px;}

113 .sprite-source-39{background-position:-96px -48px;width:16px;height:16px;}

114 .sprite-source-38{background-position:-96px -64px;width:16px;height:16px;}

115 .sprite-source-37{background-position:-96px -80px;width:16px;height:16px;}

116 .sprite-source-36{background-position:0px -96px;width:16px;height:16px;}

117 .sprite-source-35{background-position:-16px -96px;width:16px;height:16px;}

118 .sprite-source-34{background-position:-32px -96px;width:16px;height:16px;}

119 .sprite-source-33{background-position:-48px -96px;width:16px;height:16px;}

120 .sprite-source-32{background-position:-64px -96px;width:16px;height:16px;}

121 .sprite-source-31{background-position:-80px -96px;width:16px;height:16px;}

122 .sprite-source-30{background-position:-96px -96px;width:16px;height:16px;}

123 .sprite-source-3{background-position:-112px 0px;width:16px;height:16px;}

124 .sprite-source-29{background-position:-112px -16px;width:16px;height:16px;}

125 .sprite-source-28{background-position:-112px -32px;width:16px;height:16px;}

126 .sprite-source-27{background-position:-112px -48px;width:16px;height:16px;}

127 .sprite-source-26{background-position:-112px -64px;width:16px;height:16px;}

128 .sprite-source-25{background-position:-112px -80px;width:16px;height:16px;}

129 .sprite-source-24{background-position:-112px -96px;width:16px;height:16px;}

130 .sprite-source-23{background-position:0px -112px;width:16px;height:16px;}

131 .sprite-source-22{background-position:-16px -112px;width:16px;height:16px;}

132 .sprite-source-21{background-position:-32px -112px;width:16px;height:16px;}

133 .sprite-source-20{background-position:-48px -112px;width:16px;height:16px;}

134 .sprite-source-2{background-position:-64px -112px;width:16px;height:16px;}

135 .sprite-source-19{background-position:-80px -112px;width:16px;height:16px;}

136 .sprite-source-18{background-position:-96px -112px;width:16px;height:16px;}

137 .sprite-source-17{background-position:-112px -112px;width:16px;height:16px;}

138 .sprite-source-16{background-position:-128px 0px;width:16px;height:16px;}

139 .sprite-source-15{background-position:-128px -16px;width:16px;height:16px;}

140 .sprite-source-14{background-position:-128px -32px;width:16px;height:16px;}

141 .sprite-source-13{background-position:-128px -48px;width:16px;height:16px;}

142 .sprite-source-12{background-position:-128px -64px;width:16px;height:16px;}

143 .sprite-source-11{background-position:-128px -80px;width:16px;height:16px;}

144 .sprite-source-10{background-position:-128px -96px;width:16px;height:16px;}

145 .sprite-source-1{background-position:-128px -112px;width:16px;height:16px;}

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。