css sprites的学习

  经过一天的资料查找与学习，终于理解了css sprites(又名css精灵或雪碧图)是一种css贴图定位，实现图形图像拼合的技术。在这里分享一下css sprites的大体内容：

     大型网站可以将许多单独的图片有机的结合起来，从而使其便于维护和更新，这种技术虽然已经用了很久了，但今天我再次谈论到，我觉得web 前端知识值得了解和应用，以便于在以后的工作中会使用到。

   css sprites的作用：
      将若干小图像封装到一幅大图像中，以便减少http请求次数。CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。。
   实现 ：
      在页面中，根据某一个小的区域尺寸大小，创建一个一模一样的元素

     css sprites是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。CSS sprites其实就是对CSS背景background样式的扩展应用，以前设置背景background-position常见为正数值，设置背景靠左靠上距离多少像素开始显示图片，为负数值后，是将图片拖离左边上边多少像素开始显示图片。

     了解：图像拼合
     理解：图像拼合就是单个图像的集合；有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求；使用图像拼合会降低服务器的请求数量，并节省带宽。

    1、用css来定位坐标，对于小型项目非常合理，但对于大型项目定位十分浪费时间，于是可以用jquery统一设置坐标（ss雪碧图的定位参数按实际需求）

<script>
    $(function() {
        var index;
        var icorW;
        $("ul>li").each(function(index) {
            index = $(this).index();//获取对象的索引值
            icorW = $(this).width()+2;//获取对象宽度
            var _this = $(this);
            $(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 0px");//先众神归位
            
            $(_this).hover(function () {
                $(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 103%");

                $("span").html(index);//测试索引数值

            },function(){
                $(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 0px");
            })
            
        })
    
    })
    </script>

自己的对css sprites理解不够深刻，希望大家多多提出意见!