举个例子
,
例如
:
生成的
css
看起来像下面这样
:
#web
{
width:
17px;
height:
17px;
background-repeat:
no-repeat;
background-image:
url('../img/mysprite.png');
background-position:
left -0px;
}
#logo {
width:
50px; height: 50px;
background-repeat:
no-repeat;
background-position:
top right;
background-image:
url('../img/mysprite.png');
background-position:
right -17px; }
#main-box {
background-repeat:
repeat-x;
background-position:
5px left;
background-image:
url('../img/mysprite.png');
background-position:
left -64px;
}
注意在生成的
css
文件中
,
所有的
SmartSprites
指令都被忽略了
.,
如果不幸你发现有的没有被删除掉
,
意味着这些
个别的指令有语法错误
,
而被忽视掉了
, Warning messages
可以帮助你准确定位到这些问题
.
同样
,
如果发现
SmartSprites
没有去掉原始的
background-position
属性
,
但是将自己添加到了下边
.
你的
background-position
或者
background-image
属性下面出现了
SmartSprite
的
sprite reference
指令的话
,
你的设计可能被破坏
,
.
原话为
:( Also notice that SmartSprites currently doesn't remove the original
background-position
properties, but appends its own ones below to shadow them. Your design
may break if you have
background-position
or
background-image
properties appearing below
the line with SmartSprite's sprite
reference directive.)
5.
检查如果你的设计依然和以前一样
,
有可能
,
他不会马上生效
,
详见常见问题提示
. FAQ
(
原文为
:
Check if your design still looks the same
.
Chances are, it won't right away. See FAQ
for some tips)
6.
调节全局选项
.
SmartSprites
有一些选项可以在命令行调用
,
可以更进一步的调节你的设计
a.
--root-dir-path
::
指定
-
SmartSprites
处理的路径
,
如果没有指定
css-files
或者指定了
output-dir-path
,
则这个属性是必须的
,
默认值
,
不指定
.
SmartSprites
将会处理指定目录和其子目录下所有以
*.css
为扩展名的文件
,
对于处理
css
文件时更多细粒度的控制
,
请查看
css-files
项
.
如果提供的根目录是相对路径,则会解析为当前工作目录的路径.
b.
--css-files
:
要处理的
css
文件路径
,
如果没指定
root-dir-path
,
则此选项是必须的
,
默认值
,
不指定
.
使用这个选项
, SmartSprites
将会处理所有的列出来的
css
文件
,
如果
css-files
和
output-dir-path
同时使用
,
root-dir-path
也要指定
,
以便
SmartSprites
可以保持目录结构供给
output-dir-path
中的
root-dir-path
.(
原文为
:
root-dir-path
must also be specified so that SmartSprites can preserve the directory
structure found in
root-dir-path
in
output-dir-path
.)
,
如果
root-dir-path
和
output-dir-path
使用了
,
在
root-dir-path
范围外的
css-files
将被忽略
.
相对路径的
css
文件将会被解释成当前工作目录
,
请注意
, SmartSprites
没有扩展任何通配符
(
类似
:
style/*.css
),
it assumes the expansion is
performed at the command line shell level.(
没译的原文
)
如果是指定一个
Ant
任务处理
css
文件列表
,
使用一个或者多个嵌套的
fileset
元素
,
Please see the
build.xml
file in the distribution archive for an example.(
原文
,
应该是请查看示例中的部署文件
)
C.
--output-dir-path
:
处理的
css
文件和
css-relative
sprite images
的输出路径
,
可选项
,
默认值
,
不指定
,
如果指定了一个非空的
output-dir-path
.
也必须指定一个非空的
root-dir-path
.
root-dir-path
的目录结构将会保持原样输出到
输出路径中
.
例如
:
如果
root-dir-path
中的
css
文件在目录
css/base
下
,
处理结果将会输出到
output-dir-path/css/base
路径下
.
并且
CSS-relative
sprite images
也会输出到这个路径中
. Sprite images
相对于
document-root-relative
的
urls
会被改写为相对于
document-root-dir-path
的
.
如果
output-dir-path
路径不存在
,
将会被创建
,
如果提供的路径为相对的
,
则会被认为是相对于当前工作路径的
.
你可以设置
output-dir-path
为空值
,
这样生成的
css
文件将和原始文件在同一目录下
,
扩展名由
css-file-suffix
指定
.
sprite images
也和原始文件在同一目录下
..
如果你使用了一个非空的
output-dir-path
,
你也可以使用一个非空的
css-file-suffix
.
D.
--document-root-dir-path
:
Document root path for document-root-relative (starting with
/
)
image urls in CSS,(
原文
,
意思应该是提供一个上下文路径,
以便css
中的img
相对路径作为参考
)
可选项
.
默认值
,
不指定
.
所有
document-root-relative
图片和
sprite
的
urls
都是相对于
document-root-dir-path
的
,
并且
document-root-relativesprites
的
urls
会被重写为相对于
document-root-dir-path
.
如果你的
css
图片都是相对路径的
,
这个属性可以置空
,
如果提供的是相对路径
,
则会认为相对于当前工作目录
.
E
.
--log-level
:
消息级别
,
可选项
,
默认值为
:INFO
重要性低于
log-level
级别的日志信息将被输出
, SmartSprites
有
3
级别的日志信息
(
重要程度递增
)
1,
INFO
: information messages,
可忽略
.
2,
IE6NOTICE:
注意
:
可能与创建
IE6-friendly sprite images
时的质量损耗有关系
.,
参见
: IE6-friendly
PNG
项
3,
WARN:
warnings
相关的语法
,
此日志的原因是转换的时候发生
IO
和
sprite
渲染质量损耗问题
,
原来的设计将被破坏
.
(
原文
:warnings related to
syntax, IO and sprite rendering quality loss problems that may cause the
converted sprite-based designs look broken)
F:
--sprite-png-depth
: PNG
格式的颜色深度
,
可选项
,
默认值
:AUTO.
1.
AUTO : Png
颜色深度将会自动选择
.
如果
sprite
图片没有包含部分透明
(alpha
通道
)
并且少于
256
色
,
将会采用
PNG8 ,
否则
,
将会采用
PNG24.
2.
DIRECT:
PNG24.
3.
INDEXED :
采用
png8 ,
如果有半透明
(alpha channel)
或者色值大于
256
色
,
则会发生损耗
,
这时候会给出
warnings
信息
,
参见
sprite-matte-color
属性
.
G:
--sprite-png-ie6
:
如果指定
sprite-png-ie6
:,
则遍历
png sprite image,
寻找有半透明
(alpha channel)
或者大于
255
色并且透明的
png, SmartSprites
将会为
IE6
生成一个对应的颜色减少的
PNG8
文件
,
一条额外的
IE6
支持的
css
会被添加入生成的
css
文件
,
确保
IE6(
并且只有
IE6)
使用
色值缩水的版本
:
#web {
width: 17px; height: 17px;
background-repeat: no-repeat;
background-image: url('../img/mysprite.png');
-background-image:
url('../img/mysprite-ie6.png');
background-position: left -0px;
}
参见
: IE6-friendly
PNG
项
.
H: --css-file-encoding
:
假定输入和输出的
css
文件的编码
,
默认值
: UTF-8,
允许的值列表
,
请参见
list of encodings supported in Java
..
I.
--css-file-suffix
:
追加到处理过的
css
的文件名后面的后缀
,
可选项
,
默认为
:
-sprite
.
7.
用
build
脚本来整合
SmartSprites,
SmartSprites
comes with an Ant that performs sprite processing and has exactly the same
options as the command line invocation.(
原文
,
大意是
,Ant
生成sprite
和命令行调用完全一样
),
对于一个任务调用的示例
,
请看一下
build.xml
脚本
,
它执行任务时会从
smartsprites.properties
属性文件中读取参数生成
sprites.
请注意
,
不同于命令行接口
,Ant
任务解释相对路径为
build.xml
文件的位置
.
Frequently
Asked Questions(
常见问题
)
1.
转换成
sprites
后
,
和我原来的设计完全不一样
.
咋回事
?
这种情况可能发生
:-),
首先
,
检查
SmartSprites warning
信息
,
他们会指出一些因为语法错误而被忽略的指令
.
在进一步的调查前
,
确保没有警告信息
.
第二步,确保每个SmartSprites指令都在单独的一行内.包含
*/
序列结束注释,否则,你可能得到不可预知的结果.
第三步
,
就像前面章节所示的那样
,
SmartSprites
暂时没有去掉原始的
background-position
属性
,
只是把自己像影子一样附加在了下面
.
你的设计可能被破坏
,
如果你有
background-position
或者
background-image
属性出现在
SmartSprite's
sprite reference
指令的下面
.
这种情况下
,
SmartSprites
会输出一个警告信息
(warning),
如果这种情况发生了
,
要移动被重写的属性到
sprite reference
指令的前面
,
重新运行
SmartSprites.
2.
其他图片从
sprite
中露出来了
,
这种情况发生的原因是盒子
(div)
的大小大于
sprited image
了
,
在这种情况下
,
其它的靠下的或者靠右的图片将显示出来.
修正这个问题的方法:
你可以设置盒子(div)
的尺寸与图片大小相同,
如果是不可能的,
使用sprite
外边距(
例如:
sprite-margin-bottom
)
里创建一些空白区域,
这样,
左边和右边的图片就不会显示出来了.
3.
在
sprites
中
,
重复的图片不重复了
,
是否是一个
bug?
图片水平平铺
(
background-repeat: repeat-x
)
需要增加一个垂直布局的
sprite(
sprite-layout: vertical
),
图片垂直平铺
(
background-repeat: repeat-x
)
需要在一个水平布局的
sprite(
sprite-layout: horizontal
)
中
,
没有其他的方式解决这个问题
,
因此在
SmartSprites
中,sprite
image
有两种布局方式.
<!-- [if !supportLists]-->4.
<!-- [endif]-->是否有一些使用
SmartsSprites
的大的示例我可以看一看?
是的,
看一下
test/ real-world-example
路径下分布的目录,
这是我工作中的一份原始设计,
然后产生了
SmartSprites
这个点子.
5.
SmartSprites
是否有一些教程? Yes,
你可以在
references section
找到他们.
6.
我有发现一些bug,
我怎么提交这些bug
呢,
请使用我们的issue tracker
.
7.
你会计划在
SmartSprites
中增加一些新的功能吗?yes,
请在
road map
中看我们的更多信息.
Version history
V0.2.4
,
发布日期:2009 9
月, took 28 hours of work
·
从sprites
中除去了重复的图片(SMARTSPRITES-18
, 3 votes)
·
支持对指定的个别css
文件做处理
(SMARTSPRITES-37
)
·
Bugfix: SMARTSPRITES-42
·
Bugfix: SMARTSPRITES-45
·
Google Collections JAR updated to version
1.0-rc2
V0.2.3
,
发布日期:2009 4
月
·
Bugfix: SMARTSPRITES-31
·
Bugfix: SMARTSPRITES-32
·
CSS
file encoding parameter
added (SMARTSPRITES-33
) (
增加对选择css
文件编码的支持)
分享到:
相关推荐
SmartSprites完全自动维护设计中CSS Sprite。 添加或更改拼接图像时,无需繁琐的复制和粘贴到CSS。快速开始下载SmartSprites二进制文件跑: smartsprites --root-dir-path test/real-world-example在+ test / real-...
你改变了一些东西,它改变了整个版本重新编译的 smartsprites 可以在与 google-collections 稳定版本没有冲突的情况下工作您可以忽略基于正则表达式的资源,以免被类似的东西缩小代码: uiperformance....
埃森哲制药企业数字化转型项目顶层规划方案glq.pptx
私信博主免费获取真题解析以及代码
【资源说明】 基于FPGA读取设计的心电图代码源码+全部资料齐全.zip基于FPGA读取设计的心电图代码源码+全部资料齐全.zip 【备注】 1、该项目是高分课程设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11/linux测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
【资源说明】 基于Hadoop平台的分布式搜索引擎的设计与实现+部署文档+全部资料 高分项目.zip基于Hadoop平台的分布式搜索引擎的设计与实现+部署文档+全部资料 高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
私信博主免费获取真题解析以及代码
【资源说明】 基于Hadoop的智能购书系统的设计与实现+部署文档+全部资料 高分项目.zip基于Hadoop的智能购书系统的设计与实现+部署文档+全部资料 高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
【作品名称】:基于 python 在树莓派上面实现摄像头视频人脸识别 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:基于 python 在树莓派上面实现摄像头视频人脸识别
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip基于MQTT的校园新闻APP原生Android源码.zip
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
【作品名称】:电压检测系统(含VB上位机+下位机程序)proteus仿真+程序资料 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:电压检测系统(含VB上位机+下位机程序)proteus仿真+程序资料
第三讲python基础day03.zip
电子元件 电子行业 行业分析 数据分析 数据报告 行业报告
华中科技大学电信专业 课程资料 作业 代码 实验报告-操作系统-内含源码和说明书.zip
本研究提出了基于Hadoop的VGI矢量空间数据管理方法,旨在解决VGI数据管理中的诸多挑战。通过利用Hadoop的分布式计算平台,实现了对VGI数据的高效管理和分析,提高了数据的准确性和一致性。 适用人群:本研究的方法适用于地理信息系统领域的研究人员、空间数据管理者、以及对VGI数据感兴趣的社会学者和政策制定者。 使用场景及目标:该方法可以应用于处理大量VGI数据的管理和分析,为地理信息系统的应用提供更准确、更及时的数据支持。在实际场景中,可以用于城市规划、交通管理、环境监测等领域的数据处理和分析工作,促进社会各个领域的发展和进步。 其他说明:通过实验和案例分析验证了基于Hadoop的VGI矢量空间数据管理方法的有效性和可行性,展示了其在实际应用中的优势和潜力。该方法对于推动VGI数据的管理和应用具有重要的意义,为地理信息系统和空间数据管理领域的进步提供了新的思路和方法。