2. 第二種叫 Extended CSS Sprites 或 Extending CSS Spriting，是使用 img 標籤，設定為絕對坐標後，再用一個相對坐標的 div 包起來，使用 clip 切出想要顯示的圖片位置後，再透過微調位置來擺放好。
這種方法就沒有第一種的列印、瀏覽器問題，但是算座標有點麻煩，而且有位置調整，定位上可能會有些問題。
相關連結:
3. 算是第二種的變形，div 設定要顯示的寬高，overflow 設為 hidden，裡面包的 img 再調整 left 與 top 來設定從哪裡為基準點。
ex.
css
.iconcontainer{
position:relative;
width:30px;
height:30px;
overflow:hidden;
}
.icon{
margin:0px;
border:0px;
padding:0px;
}
.icon01{
position:absolute;
left:-100px;
}
html
<div class="icon iconcontainer" >
<img class="icon01 icon" src="images/pic.png"/>
</div>
這就會顯示以 images/pic.png (100,0) 為基準，30x30 的圖片片段。
跟第二種方法比起來，不用去計算 clip 的位置，也不用去改 div 的座標，計算少一些，又因為沒修改 div 座標，定位上比較沒問題。
創作內容
[HTML+CSS] Css Sprites 的三種方法
塗鴉 (14)