这个页面也是我看到别人的写的，感觉不错，就自己留下了为了以后自己可以容易找到，也希望可以方便到别人。
写这个页面
需要注意的是：
1.写每一个小图片的位置时候，要用id,这样等级就高了，不然不起作用。
2.因为每个图片的大小位置距离是差不多的。加入是30px, 那么第一个位置就是（-20px，-20px），因为位置是从（0,0）左上开始的，现在平移是 往右下走，就好比第四象限，按（-20n px, - 20n px）走。
3.引入的这个图片是一样的只是颜色不一样，都放到父级里，一个是现在的状态，一个是鼠标划过的状态，位置都不用变就可以换图片了。
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>背景background-position切图</title> <style> .showImage{ background-image: url(9pic2.jpg); width: 100px; height: 100px; } .showImage<a href="javascript:;" target="_blank" class="baidu-highlight">:hover</a>{ background-image: url(9pic1.jpg); } ul{ <a href="javascript:;" target="_blank" class="baidu-highlight">list-style</a>: none; } ul li{ float: left; margin: 20px; } #item1{ background-position: 0 0; } #item2{ background-position: -100px 0; } #item3{ background-position: -200px 0; } #item4{ background-position: 0 -100px; } #item5{ background-position: -100px -100px; } #item6{ background-position: -200px -100px; } #item7{ background-position: 0 -200px; } #item8{ background-position: -100px -200px; } #item9{ background-position: -200px -200px; } </style> </head> <body> <div class="container"> <ul> <li id="item1" class="showImage"></li> <li id="item2" class="showImage"></li> <li id="item3" class="showImage"></li> <li id="item4" class="showImage"></li> <li id="item5" class="showImage"></li> <li id="item6" class="showImage"></li> <li id="item7" class="showImage"></li> <li id="item8" class="showImage"></li> <li id="item9" class="showImage"></li> </ul> </div> </body></html>