前端工程師在製作網頁圖標時，通常會將諸多精靈放在一張圖片上，然後採用截取的方式在網頁上顯示出來，那麼應該這樣截取呢？下面分別使用div背景和img兩種方式來演示。
顯示效果
實現代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-weight: bold;
}
#pic {
width: 150px;
height: 150px;
background: transparent url(./a.jpg) no-repeat scroll -100px -50px; /* left top*/
}
#pic2 {
position: absolute;
top: 368px;
left: -100px;
clip: rect(50px 250px 200px 100px); /* top right bottom left */
}
</style>
</head>
<body>
<div>原圖<div><img src="./a.jpg"></div></div>
<div>使用div背景圖片截取<div id="pic"></div></div>
<div>使用img截取<div><img id="pic2" src="./a.jpg"></div></div>
</body>
</html>
