谈谈网站设计时图片的使用

本文主要分享笔者在开发 云翔在线软件平台 时合并图片的经验,在文章开始时,我们先看看Google首页的图片:

toolbar_animation_20090618

上面就是Google主页使用的图片,所有工具栏的图片都合并在一副图片里面了,其实,在写Css时,DIV的背景图片可以这样指定:

background: url(Images/common.png) no-repeat -163px -31px;

最后两个数值可以理解为以DIV左上角为原点,图片坐上角的坐标:

toolbar_animation_20090618123

如上图所示,只要我们设计好DIV的大小,就相当于把图片“裁剪”出来。这样一来,就可以将网站上所有no-repeat的图片整合到一种图片上。然而,现实的问题往往没有那么简单,上面的方法仅仅只能处理no-repeat的图片,而网站中往往要使用到repeat-x,和repeat-y的图片,例如一般的弹出窗口:

image

以下说说如何处理repeat-x的图片,repeat-y的处理方法类似,以窗口的标题栏的背景图片为例:

image

如上图所示,我们只需要把所有repeat-x的图片纵向的合并在在一起,然后指定一下y坐标就可以了。同理把所有repeat-y的图片横向的合并在在一起。

如此合并后,这个网站所有repeat-x,repeat-y,no-repeat的图片只需3副图片即可。至于repeat的图片,就没有办法了,只能老老实实单独使用一副图片。

 

最后鄙视一下IE6,因为IE6默认没有缓存DIV的背景图片,会重复下载,需要调用一下

document.execCommand("BackgroundImageCache", false, true);

才可以。。。

 

posted @ 2010-04-14 00:49  卢春城  阅读(2526)  评论(12编辑  收藏  举报