CSS Sprites在线生成器

一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点。倡萌在制作WordPress主题时,也尽可能在这方面做最大的优化,当然了,倡萌技术不到家,所以只好使用一些简单的工具来操作。今天倡萌就推荐一款CSS Sprites在线生成器CSS Sprites Generator

如果你不知道什么叫CSS Sprites,就自己搜索一下吧,倡萌就不介绍了。

csssprites.com是倡萌比较喜欢的网站,通过它可以简单几步就拼合了背景图片,下面就一起来看看吧

访问CSS Sprites Generator,就可以看到如下界面

2012-07-25_215304

CSS Sprites Generator操作方法

1.首先选择需要拼合的图片(最好是大小、格式都一样的,但也不绝对),如倡萌演示时,就选择了自己设计的几个小图标(宽高都为20px)

2.点击+options展开设置选项

  • Padding between elements:图片与图片的间距 (根据自己的需要设置)
  • Border around the whole image:每个图片的边框(通常为0px)
  • Align elements:对齐方式,left为左对齐(纵向排列),top为顶部对齐(横向排列)
  • Background color:背景颜色,transparent继承原图背景,或者自动以RGB颜色

3.设置好以后,点击generate!按钮即可生成

4.接着你可以查看和下载生成的图片,CSS Sprites Generator还自动给出了每个图标的调用方法,如果你了解CSS Sprites技术,相信调用就不是问题了。

CSS Sprites Generator还是有不少局限的,仅仅提供了简单的左对齐和顶部对齐这两种方式,如果可以在线自由拖动调整图片的位置,这样就非常强大啦!期待以后有这样的功能!

好了,你自己也去亲自体验一下吧:CSS Sprites Generator

如果你也有搜集一些好的建站工具,一定和倡萌分享哦!!

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2012/7/25作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

7 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 砖厂页岩破碎设备 砖厂页岩破碎设备说道:
    7#

    这个好像很不错,不用把图片打成zip压缩包了 ,不过好像都是只能选择单纯的横向或纵向

  2. 站长志 站长志说道:
    6#

    CSS精灵。非常好用的东西,同赞。

  3. ThisIsGame ThisIsGame说道:
    5#

    居然中文

  4. 潜行者m 潜行者m说道:
    4#

    正愁着怎么用photoshop去做这个图片,就看到这篇文章了,收藏了

  5. Crystal Pendant Crystal Pendant说道:
    3#

    好东西……以前我一般都是手动用PS慢慢添加……

  6. 一堵墙 一堵墙说道:
    2#

    就是CSS精灵技术啊

  7. luacloud luacloud说道:
    1#

    这个好东西,上午折腾半天雪碧了。

扫一扫,用手机访问本站

扫一扫,用手机访问本站