CSS 雪碧圖的使用


如果你正在使用 tmt-workflow，那麼當你執行 gulp build_dist 的時候，slice 的目錄下的圖片將會根據 CSS 的使用自動合併 。

使用介紹

當圖片 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 圖形保持偶數高寬。 （懶癌犯了，病治好後讓插件自動給奇數@2x圖加透明白邊也是可以的）