這個頁面也是我看到別人的寫的，感覺不錯，就自己留下了為了以后自己可以容易找到，也希望可以方便到別人。
寫這個頁面
需要注意的是：
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>
?
方法與示例)
