html css 切割图片 显示

参考：
http://tech.ddvip.com/2008-12/122835390597191.html


页面可以直接运行：

< html >
< head >

< style  type ="text/css" >

.box1 {
float : left ;
width : 21px ;
height : 21px ;
position : relative ;
background :  #F3F2E2 url(http://mp3.youdao.com/images/mbox_bg.gif) no-repeat ;
}
.box1  {
background-position :  0px -60px ;
}


</ style >

</ head >

< body >

     < div  class ="box1"  
        onmouseover ="this.style.backgroundPosition='0px -81px' "  
        onmouseout ="this.style.backgroundPosition='0px -102px' "     
     >
     </ div >

</ body >

</ html >