CSS Sprites制作实战

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 - 编程

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