利用background-position xpos ypos
就是以图片的左上角顶点为原点，往下和右都为正，反之为负，移动图片
如: background-position: 15px 20px;（指将图片向右移15px,向下移20px）
background-position: left -29px;(当中的left指从图片的最左端读起，-29px就是将图片向上移动29px）
例子：
原始图片：
html代码：<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <title>图片拼合技术</title> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites_hover.gif') 0 0;} #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('img_navsprites_hover.gif') -91px 0;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>
运行结果：
鼠标移动到第一个图片，颜色变暗，其实是重新移动了图片
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
鼠标移动上去时候，图片想上移动45px