zoukankan      html  css  js  c++  java
  • 为节省请求数而使用图标合成图

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

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

  • 相关阅读:
    Binary Tree Inorder Traversal
    Populating Next Right Pointers in Each Node
    Minimum Depth of Binary Tree
    Majority Element
    Excel Sheet Column Number
    Reverse Bits
    Happy Number
    House Robber
    Remove Linked List Elements
    Contains Duplicate
  • 原文地址:https://www.cnblogs.com/leftfist/p/4258114.html
Copyright © 2011-2022 走看看