版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54914866
之前就發現一些網站吧所有的小圖示拼接在一張圖檔中，但是一直不知道這是怎麼做到的，今天特地了解了一下，才知道這種用法叫做精靈圖。他的優點是可以減少浏覽器請求的次數，把所有圖檔拼接在一張圖中就隻需要請求一次，當浏覽器需要用到圖檔時再從大圖檔中解析。這樣可以加快通路的次數。先來看看效果圖：
拼接的圖檔：
他的原理是，先規定好每個小圖示的大小，建立一個和小圖示大小相同的容器，再通過移動背景圖檔的方法将大圖中需要的部分暴露在這個容器中。就是說這張圖檔就像被一塊布遮住，隻是在想要的地方留了一個空，好讓背景圖檔暴露出來，這樣隻要将将背景圖檔一道合适的位置就可以隻顯示我們想要的部分。
具體步驟：
1，建立合适大小的容器
2，将拼接的大圖作為容器的背景，并設定為no-repeat
3，改變背景的位置
對于改變背景的位置我們需要知道小圖示在大圖檔的的坐标（以大圖的左上角為原點），例如如果小圖示在大圖中的坐标是(10,20)，那麼将背景圖檔向左移動10px,向上移動20px就可以抵消小圖示在大圖的位置。
擷取這個坐标可以用PS中的切片工具，将小圖示選擇出來後右擊選擇編輯即可看到小圖示的坐标
完整源碼如下：
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.div0{
margin:10px;
}
.demo1,.demo2,.demo3,.demo4,.demo5,.demo6{
display:inline-block;
width:17px;
height:17px;
background-color:transparent;
background-image:url(ico.png);
background-repeat:no-repeat;
}
.demo1{ background-position:-38px -37px;}
.demo2{ background-position:-62px -37px;}
.demo3{ background-position:-86px -37px;}
.demo4{ background-position:-110px -37px;}
.demo5{ background-position:-134px -37px;}
.demo6{ background-position:-159px -37px;}
ul{
list-style:none;
}
ul li {
margin:10px;
}
</style>
</head>
<body>
<div class="div0">
<ul>
<li><div class="demo1"></div> 圖示1</li>
<li><div class="demo2"></div> 圖示2</li>
<li><div class="demo3"></div> 圖示3</li>
<li><div class="demo4"></div> 圖示4</li>
<li><div class="demo5"></div> 圖示5</li>
<li><div class="demo6"></div> 圖示6</li>
</ul>
</div>
</body>
</html>
![阿裡雲ECS（ubutun）下安裝docker[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)