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