CSS Sprites制作实战

2008/6/3 18:15  

CSS Sprites技术是将一组小图片合成为1张图片,以节省传输时间和带宽。具体制作方法如下:

1. 将要组合的图片压缩成zip文件。各图片的尺寸最好一样。

2. 到spritegen生成sprite图片和css.
输入以下内容:

  • 步骤1中压缩的图片zip
  • 单个图片的宽度(Horizontal Offset)和高度(Vertical Offset)像素数
  • 生成的图片文件格式(Sprite Output Format),可选gif、png、jpg。可以分别生成,取尺寸最小的。

然后,点击”Create Sprite Image & CSS”生成图片和CSS.

3. 点击Sprite Image下面的Download Sprite Image,下载生成的图片文件。

4. 将定义图片位置的CSS Rule全部拷贝到你的CSS文件中。

5. 网站还提醒你”Don’t forget to add a background rule to reference the sprite image. “。这部分稍有点麻烦,单独说说。jijian91是在CSS中这样写:

.aaa, .bbb{ background: url(“<CSS Sprites图片名>”) no-repeat top left; width:104px; height:16px;}

其中,.aaa、.bbb是步骤4中拷贝的CSS Rule中的全部CSS类。width和height是单个图片的尺寸,与步骤2中输入的一致。

6. 修改图片代码
修改前,一般是一个链接(<a>)套在图片(<img>)外面,例如:

<a href=”http://jijian91.com/feed/atom”><img src=”http://jijian91.com/image/test.gif”></a>

给标签<a>增加CSS中对应图片的ID。然后将<img> 标签替换成若干个 即可,目的是留显示图片的空间。也可以在步骤5的CSS中增加display:block;。改后如下:

<a class=”.aaa” href=”http://jijian91.com/feed/atom”> </a>

7. 至此,大功告成!
本网站的添加网络书签和RSS订阅都是采用CSS Sprites制作的。

最后,说明一下:
CSS Sprites可应用于任何网站,并不限于wordpress或blog。
生成的CSS是采用类,也可以改成使用CSS ID,效果一样。

参考:阅微堂

转载请注明来自:jijian91与小z - 编程

永久链接:http://jijian91.com/blog20080603/css_sprites_action.html