css 精灵的用法

（从已经死了一次又一次终于挂掉的百度空间人工抢救出来的，发表日期2014-02-12）

 

是指将多个图整合到一张图上，避免多次请求服务器下载。

主要使用CSS background-position 属性。

语法示例：

#viploginbutton{width:65px; height:23px; background:url(images/buttonbg.png) no-repeat;background-position:0 -86px;border:0px;color:#FFF;cursor:pointer;}

#viploginbutton:hover{width:65px; height:23px; background:url(images/buttonbg.png) no-repeat;background-position:-65px -86px;border:0px;color:#FFF;cursor:pointer}

#viploginbutton:active{width:65px; height:23px; background:url(images/buttonbg.png) no-repeat;background-position:-130px -86px;border:0px;color:#FFF;cursor:pointer}

（border：0px是让按钮的边框消失，cursor：pointer是让鼠标悬停时变成小手模样。）

先要指定元素的宽和高，然后指定那个大个背景图，

images/buttonbg.png

最后指定背景图的左上角的坐标。依次是x px和y px

注意：原点0px 0px代表的是整个背景图左上角的那个位置

向下和向右延伸都要使用负值。