Documentation d'aide WeFlow
/ CSS 雪碧圖的使用
CSS 雪碧圖的使用
如果你正在使用 tmt-workflow，那么當(dāng)你運(yùn)行 gulp build_dist 的時候，slice 的目錄下的圖片將會根據(jù) CSS 的使用自動合并 。
使用介紹
當(dāng)一張圖片 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 倍圖。
注意點(diǎn)
- 圖片一定是放在 slice 目錄下才會被合并
- 使用的時候一定是
background-image屬性才會被識別匹配 - @2x 圖保持偶數(shù)高寬。（懶癌犯了，病治好后讓插件自動給奇數(shù)@2x圖加透明白邊也是可以的）