Css Sprites图片整合应用详解(三)

                                                                                               
                    </p>2、图片的存储与格式。一般来说，我会将所有平铺背景类的图片存储为.jpg格式，品质方面可以适当调整，因为.jpg格式显示的色彩比较饱和，不至于是背景图片产生很明显的变化；其他Icon、Button类图片则最好存储为.gif或者png-8的，因为这两种格式不会计算图片之间空白部分的大小；而且经常有圆角、渐变类的效果需要半透明来支持，所以这两种格式最适合。
这里要小小鄙视下自己了，因为之前为了保险，几乎每次都是将.gif或者.png-8的图片存为256色的；会上，有朋友提到128色即可保证图片的品质，这样又可以减小图片的大小。
这里需要注意图片的大小。我们的要求：除特殊图片外，每张图片不超过30KB。
3、图片在Css中的应用。我们都知道在Css中通过读取background-position读取合并图片的位置来应用每一个小图片，在读取中，我接触的有三种方法：
第一种、每应用到大图片就读取一次图片的url、repeat、position。这样虽然在服务器端可以认为是一次请求，但无疑大大的增加的了css的体积，尤其是当图片的ur是绝对路径时更是明显。这种方法只在初期应用Css Sprites时可用，不推荐长期使用。
第二种、定义一个类来引用图片的url和repeat，然后在用到position样式的标签中增加一个引用的类。例如：

• .bodyBg {background-image:url(images/all_bg.jpg); background-repeat:repeat-x;}
  
• .bodyIcon {background-image:url(images/all_icon.gif); background-repeat:no-repeat;}
  

• <h2 class="contentTiele bodyBg">心得体会</h2>
  

第三种、将所有应用图片position的样式统一定义一个url和repeat，这样在标签class中也不用增加统一定义的类。例如：

• .wpnavi .current,.commentNavi .current {background:url(images/all_bg.jpg) repeat-x;}
  

<p>相对来说，第三种方法是最合适的，不过可以根据实情情况来应用，方法不是唯一的。