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

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

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

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

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

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

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

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

我用PHOTOSHOP来搞。

步骤:

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

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

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

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

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

注意事项:

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

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

原文地址:https://www.cnblogs.com/leftfist/p/4258114.html