现在的位置: 首页 > 综合 > 正文

为节省请求数而使用图标合成图

2013年04月21日 ⁄ 综合 ⁄ 共 655字 ⁄ 字号 评论关闭

网页很多小图标,比如说,列表页,每一行都有一些相同的图标。

 

如果都用<img src="">,可能新的浏览器是每样图片只发一个请求(本地有缓存应该不发请求),老的浏览器不知道,可能是有多少个IMG就发多少个请求。

 

就算是每样图片只发一个请求,但这么多种图片,瞬间的请求还是挺多的。

 

处理办法是将这些图片都合成一个,然后在CSS里用

 

{background-image:url(...); background-repeat:no-repeat;background-position:-159px -39px;width:19px;height:17px;}

 

的方法。请求只有一个,节省多了。

 

通常,将图标设为背景图,还用在换肤上。所以,每个合成图,要搞多种颜色的不同版本。

 

我用PHOTOSHOP来搞。

 

步骤:

 

1、先做出一个合成图版本(GIF格式,成为模子图)。css也相应定义好。

 

2、新建同样尺寸的空白合成图,背景为透明。

 

3、将模子图拷贝到新图,这是一个图层

 

4、然后拷贝入各种替换的小图标,它们处于不同的图层。大小与模子图上是一样的,拖到合适位置,刚刚好覆盖要替换的小图标。

 

5、好了以后另存为GIF。另一种肤色的合成图就这样做好了。对应的CSS只要换上图片URL,坐标是不用调的。

 

注意事项:

1、草稿一定要是PSD格式,如果是GIF的话,有些好的图标拖进来,颜色会失真

 

2、不要为了节省空间,将各种小图标排得很挤,相互之间要有足够的空隙。因为有些浏览器效果很令人大吃一斤,比如IE6。背景要为透明。

 

 

抱歉!评论已关闭.