Css Sprite

   Css Sprite也被为CSS精灵，这是前端攻城师必备的技能之一，也是衡量初级攻城师和中级攻城师的标准之一。

下面大概描述一下Css Sprite的基本概念：

    这是一种网页图片应用处理的方法，将一个页面涉及到的一些零散的图片整合到一张图片上，减少客户端对服务器HTTP请求的次数，然后用CSS背景图定位的方法来处理需要用到的图片部分。

    话说背景定位，其实就是操纵背景的坐标轴（background-position），它有两个值，X轴坐标和Y轴坐标，系统默认背景图的坐标为X轴0点和Y轴0点，下面举例说明一下：

 

 

组合按钮

某项目中的发布按钮的原始状态、鼠标经过状态和不可点击状态

有这样一张图当作按钮的背景图，先定义其它样式

 

 

 

btn.jpg

a{
    background-image:url(btn.jpg);
    width:87px;
    height:25px;
}

 

 

 

然后分别定义三种状态：

1、原始状态：

 

Background-position:0 0

 

2、鼠标经过状态：

 

Background-position:0 -25px

3、不可点击状态：

 

Background-position:0 -50px

 

其实像这种按钮等高的图片也可以写成：

    Background-position: top;
    Background-position: center;
    Background-position: bottom;

 

这样效果是一样，但是不利于此图片的拓展，所以我建议使用坐标轴数字，而不建议直接用方位来定义。

 

其原理图片相当于控制嵌入到该元素中的底图的位置，以鼠标经过为例，如图：

 

全部代码：

a{
    background-image:url(btn.jpg);
    width:87px;
    height:25px;
    display:block;       
    text-indent:-9999em; 
    background-position:0 0;
}
a:hover{
    background-position:0 -25px;
}
a. no{
    background-position:0 -50px;
}

 CSS Sprites图片切割术

   1. CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。
   2. 不建议CSS Sprites图片中保持一定的间距，因为文件size增大而增加文件体积。
   3. CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。
   4. size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。
   5. 在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。
   6. 在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。
   7. 图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。
   8. 区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并。
   9. 黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

补两条
10. 有的说定位时避免使用bottom或right等，当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

其实我感觉一般情况宽度图不片不会改应变，用RIGHT和 LEFT还是挺方便的，但从整体考虑，升级了。改版的。图片宽度还是有可能会改变的。必竟开始时做太宽也没什么好处，还是浪费很多空间。就是多费点时间去对坐标，最好还是不用RIGHT 和 LEIFT的了。

12　有的说竟给每个图片足够的空间
　　就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

这个我支持，必竟多空点，也占不不了多大空间，如何要追求完美，那就慢慢调吧。费了劲了。在加上浏览器兼容问题，最好还大多空间。小误差也忽略了。