CSS雪碧圖（精靈圖）使用

　　1：CSS雪碧圖：CSS雪碧圖 即 CSS Sprites，也有人叫它CSS精靈圖。

　　2：雪碧圖的由來：一個網站的頁面需要大量的小圖片或者小圖標，但是大量的圖片如果放在服務器上，每次當打開網站並且向服務器發送請求，那么請求的次數將大大增加。由此出現了雪碧圖的概念

　　3：用處：是一種CSS圖像合並技術，方法是將眾多小圖標合並到同一張圖上，用來減輕http請求壓力。然后通過操作CSS的background屬性，控制背景的位置以及大小，來展示需要的部分。

 

我也從網上找到了一張雪碧圖：（其實就是一張圖片放置各種各樣的小圖標）

　　　　　　　　　　　　　　　　　　　　　　

 

 

如果獲取精靈圖里的小圖標呢？

 

第一步：我們需要下載有關制作圖片的軟件 例如PS 和 FW  在這我用的是FW。

第二步：把圖片在軟件中打開。

　　　　打開后：

　　　　　　　　　1： 在FW的右側中間層 有一個 圖層，然后點擊圖層里面 有一個叫 位圖  在前面的小方框點擊一下 就會出現一把鎖。這樣就不怕把圖片搞的亂七八糟的了。

　　　　　　　　2：在軟件的左側 WEB里有一個叫 “切片”工具 然后點擊 用切片工具去選中精靈圖里你想要的圖標。

　　　　　　　　　3： 選中后在軟件的下側就可以查看你選中圖片的寬和高 還有圖標在圖片的位置了。因為只有這種軟件才能完美沒有誤差的獲取的到。

 

第三步：獲取到你想要的值后，使用你的編程軟件，在你個某個元素設置背景圖片的時候先引進 精靈圖，然后通過 background-position來定位。

 <div class="twoimage"></div>

　　

.twoimage{
            width:84px;
            height: 47px;
            background-image: url(images/cssjlt.png);
            background-position: -425px -250px;
        }

　　

這樣就獲取到精靈圖里的小圖標了，可以減少許多不必要的圖片。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2019-11-07   15:42:42