Skip to content

Latest commit

 

History

History
104 lines (93 loc) · 3.33 KB

a_tool_csssprite.md

File metadata and controls

104 lines (93 loc) · 3.33 KB
Raw

csssprite图片合并

使用说明

默认单位为px

非常简单，只需要在css文件中对要合并的图片路径增加?__sprite后缀即可，比如

.csssprite .abtest_huafei s {
    background:url(i/icon_01.png?__sprite) no-repeat;
}
.csssprite .abtest_lvxing s {
    background:url(i/icon_03.png?__sprite) no-repeat 6px 0px;
}
.csssprite .abtest_caipiao s {
    background:url(i/icon_05.png?__sprite) no-repeat 5px 0px;
}

执行jdf output，后台会进行css sprite编译操作后

.csssprite .abtest_huafei s {
    background:url(i/csssprite.png) no-repeat;
    background-position:0 0
}
.csssprite .abtest_lvxing s {
    background:url(i/csssprite.png) no-repeat 6px 0;
    background-position:6px -39px
}
.csssprite .abtest_caipiao s {
    background:url(i/csssprite.png) no-repeat 5px 0;
    background-position:5px -78px
}

其中icon_01.png，icon_03.png，icon_05.png小图片被合成为csssprite.png，其中csssprite为当前css文件的文件名

当css单位为rem时

在background中写上px到rem的转换比例

html {
    font-size: 20px;
}
.icon1, .icon2{
    width: 1.8rem;
    height: 1.8rem;
    margin: 10px;
    background: url(i/icon7.png?__sprite__rem20) no-repeat;
    border: 1px solid black;
}
.icon2{
    background: url(i/icon8.png?__sprite__rem20) no-repeat;
}

转换之后：

html {
	font-size: 20px
}
.icon1, .icon2 {
	width: 1.8rem;
	height: 1.8rem;
	margin: 10px;
	background: url(/i/w2.png) no-repeat;
	background-position: 0 0;
	background-size: 1.8rem 4.6rem;
	border: 1px solid #000
}
.icon2 {
	background: url(i/w2.png) no-repeat;
	background-position: 0 -2.3rem;
	background-size: 1.8rem 4.6rem
}

切图说明

把psd中图片所有icon类小图切换，在css中设置好background-position，在相对应图片后面增加?__sprite后缀

配置说明

  • 默认为开启状态，可以通过config.json的output.csssprite键值设置为false进行关闭
  • 图片之间上下间距，可以通过config.json的output.cssspriteMargin键值设置
  • 合并文件，通过config.json的outout.cssSpriteMode 0|1 设置把整个项目的雪碧图合并到一起，还是以widget为单位合并到一起，默认是1。

特性说明

  • 支持的图片格式：png，jpg，png输出png24格式，IE6的png24图片需要单独处理
  • 支持no-repeat，background-position可自由设置
  • 后续支持repeat-x，repeat-y

原理解析

  • 分析css文件内容，取出带有?__sprite的图片路径，同时对此background的backgroud-repeat、background-position进行记录
  • 取出所有图片，依靠backgroud-repeat、background-position进行图片合并，并生成合并的新图片
  • 把css文件所有sprite图片路径替换成合并的新图片路径

解析css

  • 利用正则实现一个简单的css语法解析器，可把css内容解析为
属性 值 说明
content 图片内容
url 如：i/icon.png 图片url
item 如：background: url(i/icon.png?__sprite) no-repeat 图片background
repeat null | repeat-x | repeat-y 重复
width number 图片的宽度
height number 图片的高度