Skip to content

Latest commit

 

History

History
103 lines (90 loc) · 3.42 KB

a_tool_csssprite.md

File metadata and controls

103 lines (90 loc) · 3.42 KB

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/sprite_csssprite.png?__sprite) no-repeat;
      background-position:0 0
  }
  .csssprite .abtest_lvxing s {
      background:url(i/sprite_csssprite.png?__sprite) no-repeat 6px 0;
      background-position:6px -39px
  }
  .csssprite .abtest_caipiao s {
      background:url(i/sprite_csssprite.png?__sprite) no-repeat 5px 0;
      background-position:5px -78px
  }

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

当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(http://misc.360buyimg.com/jdf/Test/widget/w2/i/w2.png?__sprite__rem20) no-repeat;
	background-position: 0 0;
	background-size: 1.8rem 4.6rem;
	border: 1px solid #000
}
.icon2 {
	background: url(http://misc.360buyimg.com/jdf/Test/widget/w2/i/w2.png?__sprite__rem20) 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}}键值设置

特性说明

  • 支持的图片格式：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 图片的高度

系统支持

win，mac，linux