CSS 雪碧圖的使用

什么是雪碧圖？

雪碧圖是根據(jù) CSS sprite 音譯過來的，就是將很多很多的小圖標放在一張圖片上，就稱之為雪碧圖。

使用雪碧圖的目的：有時為了美觀，我們會使用一張圖片來代替一些小圖標，但是一個網(wǎng)頁可能有很多很多的小圖標，瀏覽器在顯示頁面的時候，就需要像服務器發(fā)送很多次訪問請求，這樣一來，一是造成資源浪費，二是會導致訪問速度變慢。這時候，把很多小圖片（需要使用的小圖標）放在一張圖片上，按照一定的距離隔開，就解決了上述的兩個問題。

顯示雪碧圖的條件：

1）需要一個設置好寬和高的容器

2）需要設置 background-position 的值（默認為（0，0），也就是圖片的左上角），即移動圖片到自己想要的圖標位置。

調試方法:可以用瀏覽器自帶的調試工具進行調試（如 chrome 瀏覽器按 f12 即可進行調試，慢慢移動 background-position 的值來達到理想的效果）

使用介紹    

當一張圖片 icon-twitter.png 需要合并的時候，請放入 slice 目錄中，然后在 style-index.css 中這么寫：

.icon-word {
    background-image: url('../slice/icon-twitter.png');
}

合并后：

.icon-word {
    background-image: url('../sprite/style-index.png');
    background-position: 20px 20px;
}

如果圖片支持 @2x，可以命名為 icon-twitter@2x.png 一起放入 slice 目錄中，合并后會加入 media query：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (min-resolution: 240dpi) {

    .icon-word{
        background-image:url("../sprite/style-index@2x.png");
        background-position: -4px -4px;
        background-size:132px;
    }

}

依此類推，如果為 3 倍圖，則命名為：icon-twitter@3x.png 即可。目前只支持到 3 倍圖。

注意點

1. 圖片一定是放在 slice 目錄下才會被合并
2. 使用的時候一定是 background-image 屬性才會被識別匹配
3. @2x 圖保持偶數(shù)高寬。（懶癌犯了，病治好后讓插件自動給奇數(shù) @2x 圖加透明白邊也是可以的）