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


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

    如果都用<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。背景要为透明。

  • 相关阅读:
    Win8杂谈
    ipad还能横行霸道多久
    C++异步编程 for VS2011(二)
    C++异步编程 for VS2011(一)
    互联网催生的新的商业模式
    微信小程序用户评分实例
    即时通讯小程序实现代码
    CDN(内容分发网络)技术原理 枯木
    RHEL6.3下Zabbix监控实践之Zabbix的安装 枯木
    Firefox浏览器完美运行Firefox OS 枯木
  • 原文地址:https://www.cnblogs.com/leftfist/p/4258114.html
Copyright © 2020-2023  润新知