神奇的CSS sprites，制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death，如果觉得博主讲的含糊不清的话，可以看作者原文。
熟悉了常规切图的我们，在浏览大型网站的时候，有时会忍不住审查元素一下，就会发现他们会把所有的小图标整合在一个图片上，比如谷歌的
而且如果你细心一点，你会发现Google的二级搜索结果页面是底下的分页的那一排o也是用CSS Sprite做的。那么什么是CSS Sprite呢？
CSS Sprites是目前大型网站的图片处理的一种方式，原理主要是将网站上的小图片或者图标整合在一张大图上，在用css的background-position属性通过x/y轴的位置来定位图片，从而减少服务器对图片的请求数目，提高网站的加载速度。当然如果你不做大型网站，不需要精细到加载速度的时候，CSS Sprites也会制作和维护带来一些不必要的麻烦。但是当你掌握其用法时，利用CSS Sprites是可以和轻松的做出一些有趣的特效。
CSS Sprites是如何作用的？
我们用到的工具无非就是css，运用我们的想法写出富有创造力的css。
然我们从原图本身说起，把矩形分为四个部分，我们可以看出来上半部分图片，是链接刚开始的效果，下半部分是我们把鼠标悬停在链接上的效果，我们把鼠标悬停在哪个部分哪个部分就会变色。
HTML代码如下：
<ul id="skyline"> <li id="panel1b"><a href="#1"></a></li> <li id="panel2b"><a href="#2"></a></li> <li id="panel3b"><a href="#3"></a></li> <li id="panel4b"><a href="#4"></a></li> </ul>
我们用四个<li>标签和<a>组成了四个不同部分的链接。
应用css
#skyline{
width: 400px;
background-image: url(img/test-3.jpg);
height: 200px;
position: relative;
margin: 10px auto;
padding: 0;
}
#skyline li{
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
top: 0;
}
#skyline li,#skyline a{
height: 200px;
display: block;
}
注意我们并没有把图片放在链接里而是放在的ul里，一会儿你将看到原因。
我们将a元素设定空白透明但是有限定大小的block用来出发链接活动，通过定位包含它的li元素来定位，如果这里我们直接来定位a元素而不是定位li元素将在老版本的浏览器中出现错误。
定位链接
li元素被绝对定位了（position：abosulute），那么为什么li元素没有出现在浏览器的窗口的上方，被定位的元素有一个怪异却很有用的特性，被绝对定位的后代元素不是相对于浏览器窗口定位，而是相对离它最近的并且position属性为relative的父元素进行定位。所以这里的li元素相对于＃skyline进行定位。
#panel1b {left: 0; width: 95px;} #panel2b {left: 96px; width: 75px;} #panel3b {left: 172px; width: 110px;} #panel4b {left: 283px; width: 117px;}
所以通过如上代码我们就将每个li元素分别布局到四个小矩形的位置上，这是我们有了带有链接的图片地图，我们来看一下没有加上:hover时的效果和每个部分加border的效果。
hover效果
接下来我们将通过:hover使隐藏的下半部分图片剪裁一部分的方式显现，那么我们将移动图片使它精确定位呢，接下来就是CSS Sptites了，我们要讲的。
#panel1b a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;} #panel2b a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;} #panel3b a:hover { background: transparent url(test-3.jpg) -172px -200px no-repeat;} #panel4b a:hover { background: transparent url(test-3.jpg) -283px -200px no-repeat;}
我们从那里获得的像素值呢，让我们把它拆分一下，第一个数值当然水平方向的值（距离左边），第二个值时垂直方向。垂直方向的数值都是相等的200px，因为图片的高度时400px的，上下半部分各占200px，下边的部分需要向上移动200px才能覆盖上半部分，还有一点就是一般background-position值都是负值，因为背景图都是定位在左上方的。
水平方向的偏移量则是li的宽度，第二个链接的偏移量则是前两个li元素宽度的和，以此类推。
Buttons效果和特殊形状
通过以上的方式我们就可以在把网页上的按钮button应用各种效果，比如原图，我们可以做成这样的样式，方法同上
但是我们遇到不规则图形时，这是可能会出现重叠现象（看效果），这是我们可以在原图上做做文章，拆分为两个hover后的效果图，如图，这是我们正确完整的效果。
