CSS精灵技术
在CSDN中浏览博客时，在博客的结束有上一篇和下一篇的按钮，当我们把鼠标放上去的时候，可以看到这两个按钮会进行颜色的改变，这种技术称为CSS精灵技术。通过查看源发现，其实他是通过超级链接的伪类实现的，当鼠标放上去的时候改变背景颜色，这种实现能够通过一个类来控制所有的超级链接标签。文章中是通过图片来设置的。
思路一：准备两张大小相同，内容不同的图片，正常情况显示一张，鼠标经过的时候显示另外一张
a:link
是伪类，是超级链接，默认情况
a:hover
做鼠标放上去的时候
思路二：将两张图片合成一张图片，设置成图片的背景，然后将a:hover向上移动像素即可，background-position:0 -41;//图片的高度为82
HTML代码如下：
<span style="font-size:18px;"> <body> <a id="one" href="#"></a> <a id="two" href="#"></a> </body> </span>
CSS代码如下：
<span style="font-size:18px;"> <style type="text/css">
body{
margin:0;
padding:0;
}
body{
padding-left:100px;
padding-top:100px;
}
/*********** 思路一 *************/
#one{
/* 图片的大小为82*44 */
width:82px;
height:44px;
display:block;
background-color:#ccc;
background-image:url(image/link.jpg);
}
/* 当鼠标经过的时候，改变图片源 */
#one:hover{
background-image:url(image/hover.jpg);
}
/********* 思路二 ********/
#two{
/* 图片的大小为82*82 */
height:41px;
width:82px;
display:block;
margin-top:100px;
background-image:url(image/bottom.jpg);
}
/* 当鼠标经过的时候设置显示的位置 */
#two:hover{
background-position:0 -41px;/* 默认是从左上角开始显示的 */
}
</style></span>
