⒎ CSS Sprite

littledu edited this page Feb 4, 2018 · 6 revisions

如果你正在使用 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图加透明白边也是可以的)
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.