CSS Sprites 如何防止样式图片出现在它不该出现的地方

rentj1
  • 6

使用CSS Sprites过程中经常会出现其他的样式图片出现在它不改出现的地方,如果用一个单独的空标签来显示,页面中会产生很多无语义的DOM标签同时也会增加页面DOM数。应该怎么处理?有哪些拼图的最佳实践

回复
阅读 3.9k
2 个回答

大量的不同尺寸的图标,很容易出现这种情况,但在一个项目中,所有的图标保持相同的尺寸非常难,也不是必须的,多加一个空标签,并尽量使用短小的标签,如 em, i 。

在拼图过程中,有统筹的划分区域,如 16*16 的,32*32 的各一个区域并尽量余下空余位置,另外,图标之间,保留一定的空白。有利于日后图标增加的时可扩性,空白位置所占文件大小,完全在可接受范围。

附 jquery ui 雪碧图:
ui-icons_222222_256x240.png

我的做法是:

每行的高度由低到高,比如第一行图标20,第二行30,以此类推。
每行中的元素不断向后摆放,不够尺寸就扩大画布,而不是折行。
如果实在变化太大最好还是重新写css的位置参数。

另外推荐一些工具:

1. 自选图标后生成图片(单个图片文件+css sprites图)+css代码的在线工具http://iconbench.com/
2. 上传图片,通过拖动选区生成css代码的在线工具http://www.floweringmind.com/sprite-c...
3. css生成工具,需要下载http://drupal.org/project/sprites
4. 上传单个图标图片后生成CSS Sprites图http://csssprites.com/
5. 上传zip包,生成CSS Sprites图+CSS代码http://cn.spritegen.website-performan...

宣传栏