下面我們來看看300*300的大圖。每個小圖標是100*100。(此圖名稱為9pic2.jpg)
首先，將您要放置小背景圖標的元素的大小設置為圖片中圖標的實際大小，將其設置為寬度和高度，然後將背景圖像放入background-image中，例如:
。showImage{
背景-圖像:？網址(9 pic 2 . jpg)；
寬度:？100 px；
身高:？100 px；
}這個設置完成後，大圖左上角的小圖標(這裏假設是100*100的小圖標)就出來了。
然後使用background-position屬性調整背景圖像的位置，該屬性有兩個值，分別表示背景圖像沿X軸和Y軸移動的距離。妳想象壹下，背景圖壹開始和當前元素的左上角重合，但是背景圖是可以移動的，因為瀏覽器坐標系的X軸是右的，Y軸是下的。所以背景圖片壹般需要向左移動，向上移動，所以移動的數值往往是負值。
比如上面第二個小圖標，妳需要將大圖沿X方向向左移動100px，Y方向不變。按如下方式設置背景位置屬性:
#item2{
背景-位置:？-100px？0;
}其他人也是壹樣。
最後貼個例子，妳就明白這個屬性了。
用的另壹張圖的名字是9pic1.jpg，先貼上來:
代碼如下:
& lt！doctype？html & gt
& lthtml？lang="en " >
& lthead & gt
& ltmeta？charset="UTF-8 " >
& lttitle & gt背景位置正切圖
& ltstyle & gt
。showImage{
背景-圖像:？網址(9 pic 2 . jpg)；
寬度:？100 px；
身高:？100 px；
}
。showImage:懸停{
背景-圖像:？網址(9pic 1 . jpg)；
}
ul{
列表樣式:？無；
}
ul？李{
浮動:？左；
邊距:？20px
}
#item1{
背景-位置:？0?0;
}
#item2{
背景-位置:？-100px？0;
}
#item3{
背景-位置:？-200px？0;
}
#item4{
背景-位置:？0?-100 px；
}
#item5{
背景-位置:？-100px？-100 px；
}
#item6{
背景-位置:？-200px？-100 px；
}
#item7{
背景-位置:？0?-200 px；
}
#item8{
背景-位置:？-100px？-200 px；
}
#item9{
背景-位置:？-200px？-200 px；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？class="container " >
& ltul & gt
& lt李？id="item1 "？class="showImage " >& lt/李& gt
& lt李？id="item2 "？class="showImage " >& lt/李& gt
& lt李？id="item3 "？class="showImage " >& lt/李& gt
& lt李？id="item4 "？class="showImage " >& lt/李& gt
& lt李？id="item5 "？class="showImage " >& lt/李& gt
& lt李？id="item6 "？class="showImage " >& lt/李& gt
& lt李？id="item7 "？class="showImage " >& lt/李& gt
& lt李？id="item8 "？class="showImage " >& lt/李& gt
& lt李？id="item9 "？class="showImage " >& lt/李& gt
& lt/ul & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；在這個例子中，圖片是分散的，水平排列在頁面上，使用hover偽類來實現當妳將鼠標移動到它上面時，它會從黑白變成彩色。