网站设计之CSS精灵图

作者: NickYang 分类: Wordpress,技术文章 发布时间: 2013-03-24 22:48

写完这个标题后,我就后悔了,因为这个标题会让别人误以为我很懂网站设计似的,其实对于web开发我是个外行。没改标题的原因是可以让大家有“虽不懂但觉厉”的感觉。

我研究web技术仅限于折腾我这个博客,当随便翻到某个网站的时候,看到有好的地方,就抄袭过来,我这往大了说应该属于网络犯罪。

今天无事看到某人博客上的新浪微博关注的一块边栏,想着把这个做到自己的博客,以前也做过,是通过新浪开放平台获取的代码。但是放在右边栏又显得很拥挤,以前看到过别人放在博客名称旁边。于是开始做这个小功能。

现在大家看到我博客标题旁边有一个括起来的提示,看着挺明显的,边框是一张图片。获得这个图片是从网上找的图片,不过却是一个sprite图,也就是精灵图。

使用sprite图主要是为了防止多次请求图片导致网站加载慢,所以将很多图片拼起来放在一张图片上,然后显示的时候通过坐标来显示不同的图片。这样的方式可以很明显减少http get请求。

在很多大网站扒图的时候会发现并不是一张张单独的图片,而是sprite图,这也说明了该项技术被广泛应用。mozilla firefox官方推荐在网站设计开始时,就采用该项技术,否则后期如果更改意味着你将要重写大部分CSS。

精灵图最麻烦的就是确定图片的位置了,一般都是直接用PS来看图片位置,不过我是不怎么熟悉了,还是喜欢直接用工具。下面推荐一些工具。

1.CSS Sprite格式化工具 bg2css_v3.2.1.air,这个需要安装adobe air (因需要安装air,所以没有测试)

2.CssSpriteDIV.exe 某位程序员自己使用C#写的,可以选择图片放入背景后,自动生成sprite图和html代码,缺点是背景大小有限,子图片宽度不能超过300px,可能是因为预览区太小所以没敢放的太大

3.一些网站提供的在线工具

4.TX Web前端Alloy团队基于Node.js开发的iSpriter —— 智能合并CSS精灵图,可能是因为没用过NodeJS,部署看起来挺麻烦的。地址:http://www.alloyteam.com/2012/09/update-ispriter-smart-merging-css-sprite/

其他的就暂时没看到了,大家如果有什么好工具可以交流下。同时,PS如何确定精灵图的位置,还望懂得朋友告诉一声,先谢过了。

btw.本博客标题右侧的提示并没有用到精灵图,因为我只需要那张方框图,其他图不需要,用原来那张精灵图倒使得图片太大了。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

10条评论
  • Pingback: 网站设计之CSS精灵图 | multiprocess
  • ISOFTEE

    2013 年 4 月 18 日 18:12

    我来看看

    话唠 其它浏览器 其它操作系统
    1. eliteYang

      2013 年 4 月 19 日 11:34

      看吧,好久不写博客了,工作太忙了,打算这周写点

      神话 其它浏览器 其它操作系统
  • 我爱程序员

    2013 年 3 月 31 日 00:03

    我也经常看到别人好的东西就搞过来了,这不叫网络犯罪,少年.

    潜水 其它浏览器 其它操作系统
    1. eliteYang

      2013 年 3 月 31 日 16:53

      只是开个玩笑而已

      神话 其它浏览器 其它操作系统
  • Jeff

    2013 年 3 月 28 日 21:00

    我的网站也使用了你头部类似的效果,但我纯用css+html弄的,回头看看啊~~部分图片也使用了csssprite。

    潜水 其它浏览器 其它操作系统
    1. eliteYang

      2013 年 3 月 28 日 23:03

      看过了,挺好的,感谢分享

      神话 其它浏览器 其它操作系统
  • 大超超。

    2013 年 3 月 26 日 20:10

    你可以看看http://news.future.org.cn,各个板块的标题是用sprite弄的。。

    潜水 其它浏览器 其它操作系统
    1. eliteYang

      2013 年 3 月 27 日 10:13

      感谢指点,回头我研究下

      神话 其它浏览器 其它操作系统
  • 大超超。

    2013 年 3 月 26 日 20:09

    chrome审核元素,再改CSS background-position部分的数值,即可很方便地确定sprite的位置,我一直是这么做的。

    潜水 其它浏览器 其它操作系统

发表评论

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