如何在 Zurb Foundation 6 中将背景图像添加到 HTML 电子邮件中

Question

我正在尝试使用 Zurb Foudation 6 发送 HTML 电子邮件。在邮件客户端上发送 HTML 电子邮件后，不会显示所有背景图像，但在网络版本中一切正常.如何更正添加背景图像？例如我有这个代码：

<columns small="36" large="27" style="background-image: url('assets/img/BrownBG.png');>
    <spacer size="26"></spacer>
        <row>
            <columns small="18" large="18">
               <a>Link</a>
            </columns>
            <columns small="18" large="18">
               <a>Link</a>
            </columns>
        </row>
          <spacer size="20"></spacer>
        <row>
          <columns small="36" large="18">
              <p>Some paragraph</p>
          <spacer size="27"></spacer>
          </columns>
        </row>
</columns>

Answer 1

您需要在app.scss（或包含的文件）中放置样式，之后ZURB 才能做出正确的内联样式。不要编写内联样式手册。

此外，您需要设置 babel 将相对路径转换为 abloluse，就像在 *.html 模板中一样。

.pipe($.if(!!awsURL, $.replace(/('|")(\/?assets\/img)/g, "" + awsURL)))

aws 示例：

// Compile Sass into CSS
function sass() {
    var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
    return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(PRODUCTION, $.uncss(
     {
        html: ['dist/**/*.html']
      })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe($.if(!!awsURL, $.replace(/('|")(\/?assets\/img)/g, "" + awsURL)))
    .pipe(gulp.dest('dist/css'));
}

并在任务中添加 creds 管道。它看起来像这样：

// Build emails, then send to EMAIL
gulp.task('mail',
  gulp.series(creds, 'build', aws, mail));

这是初始化 CONFIG 变量所必需的。

如何在 Zurb Foundation 6 中将背景图像添加到 HTML 电子邮件中

How to add background-image into HTML email in Zurb Foundation 6

html

email

html-email

zurb-foundation

zurb-foundation-6