CSS 雪碧圖的使用

什么是雪碧圖？

雪碧圖是根據(jù) CSS sprite 音譯過(guò)來(lái)的，就是將很多很多的小圖標(biāo)放在一張圖片上，就稱(chēng)之為雪碧圖。

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

顯示雪碧圖的條件：

1）需要一個(gè)設(shè)置好寬和高的容器

2）需要設(shè)置 background-position 的值（默認(rèn)為（0，0），也就是圖片的左上角），即移動(dòng)圖片到自己想要的圖標(biāo)位置。

調(diào)試方法:可以用瀏覽器自帶的調(diào)試工具進(jìn)行調(diào)試（如 chrome 瀏覽器按 f12 即可進(jìn)行調(diào)試，慢慢移動(dòng) background-position 的值來(lái)達(dá)到理想的效果）

使用介紹    

當(dāng)一張圖片 icon-twitter.png 需要合并的時(shí)候，請(qǐng)放入 slice 目錄中，然后在 style-index.css 中這么寫(xiě)：

.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 目錄中，合并后會(huì)加入 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;
    }

}

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

注意點(diǎn)

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