这次将背景切割结合A（链接）的一些伪类来进行实际应用，以展示鼠标经过链接时出现不同的效果。
直接进入正题，先看最终效果再说：
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/cssimg/2.htm］
CSS部分：
html,body { font-family:Verdana,Arial; font-size:12px;}#list { margin:0; padding:0; list-style:none;}#list li { line-height:200%;}#list li a { padding-left:15px; background:url(skin/point_01.gif) 0 5px no-repeat;}#list li a:hover { background-position:0 -5px;}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Author" content="飘零雾雨|edzmaster@gmail.com" /><title>DY CSS切割背景应用补遗</title></head><body><h1>把图片做成一张，节省请求次数</h1><ul id="list"> <li><a href="">测试用一张图片代替两张图片</a></li> <li><a href="">测试用一张图片代替两张图片</a></li> <li><a href="">测试用一张图片代替两张图片</a></li> <li><a href="">测试用一张图片代替两张图片</a></li> <li><a href="">测试用一张图片代替两张图片</a></li></ul></body></html>
由例子中可以看到，当鼠标经过和离开链接时会有一个动画效果。其原理就是当鼠标经过时显示一张图片，当鼠标离开时显示另一张图片。按说这个效果需要两张图片来完成，而在这个例子中仅使用了一张图片，不同只是在鼠标的两种状态时改变图片的position，以此来达到相同的效果，从而又在原基础上减少了图片请求次数。
有兴趣的话，还可以将该技术扩展到滑动门菜单上，其实上面这个例子已初俱了滑动门菜单的一半效果了，只需少许扩展就OK。
*注：并不是说不论什么时候合并图片都是好的，通常只将那些经常要用到的图片合并。
