node.js - sprity的gulp插件margin设置问题？-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

node.js - sprity的gulp插件margin设置问题？

PHPz 2017-04-17 13:57:14

475

插件地址：sprites

gulp.task('sprites', function() {
    return sprity.src({
            src: './src/images/icon/**/*.{png,jpg}',
            style: './_icon.scss',
            margin: 20,
            orientation: 'left-right',
            processor: 'css',
        })
        .pipe(gulpif('*.png', gulp.dest('./src/images/'), gulp.dest('./src/sass/')))
});

配置了margin：20 生成的background-position位置会不准，设置成margin：0能正常。

PHPz

学习是最好的投资！

reply all(1)

PHPzhong2017-04-17 13:59:14 1 floor

{{#each layouts}}
  {{#each sprites}}

    {{#if dpi}}
    @media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi) {
    {{/if}}
    .icon {
      background-image: url('{{escimage url}}');
      {{#if dpi}}
      background-size: {{width}} {{height}};
      {{/if}}
    }
    {{#if dpi}}
    }
    {{/if}}
  {{/each}}

  {{#each layout.items}}
  .{{../classname}}-{{meta.name}} {
    background-position: (-{{x}}px - 20) (-{{y}}px - 20);
    width: ({{width}}px - 40);
    height: ({{height}}px - 40);
  }
  {{/each}}
{{/each}}

加了个这个正常了，好像需要配置.hbs模板