npm 包 mjml-section-bg-img 使用教程

在前端开发中，制作邮件模板往往是一件比较让人头疼的事情。而 mjml-section-bg-img 就是一款可以让制作邮件模板变得更加轻松的 npm 包。

本文将为大家详细介绍如何使用 mjml-section-bg-img，以及它的深度学习和指导意义。

什么是 mjml-section-bg-img

mjml-section-bg-img 是基于 mjml 的一个 npm 包。它的作用是给 mjml 的 section 标签添加背景图片。而且支持多种不同的形式，可以设置为覆盖整个 section，或者只覆盖 section 的一部分。同时也可以设置在不同的设备上显示不同的图片。

安装 mjml-section-bg-img

使用 mjml-section-bg-img 之前需要先安装 mjml，如果已经安装可以跳过此步骤。

npm install mjml -g

安装 mjml-section-bg-img：

npm install mjml-section-bg-img --save

使用方法

在 mjml 的 section 标签中添加 mjml-section-bg-img 的自定义属性，然后就可以设置背景图片了。

-- -------------------- ---- -------
------
  ---------
    ----------- --------------------- -----------------------------------------------
      -----------
        ---------
          ---- -- ---- --------
        ----------
      ------------
    -------------
  ----------
-------

这里设置了 mj-class="bg-primary" 的自定义 class，然后在 css 中添加以下样式：

.mj-section.mj-wrapper.mj-class-bg-primary {
  background-image: url(https://example.com/your-image.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

这里的 class 名称需要与之前设置的一致。

更多使用方法

设置响应式背景图片

mjml-section-bg-img 还支持设置响应式图片。只需要使用 mj-bg-img 属性，并且添加各自的图片路径即可。

<mj-section>
  <mj-column>
    <mj-text>
      This is your content.
    </mj-text>
  </mj-column>
  <mj-bg-img width="1200px" srcset="https://example.com/large.jpg 1200w, https://example.com/small.jpg 600w" />
</mj-section>

这里的 width 属性是指定图片的宽度。而 srcset 属性中的图片路径是指不同设备上的图片路径。浏览器会根据设备的分辨率选择最合适的图片路径。

添加覆盖整个 section 的背景图片

如果想要覆盖整个 section，可以直接在 mj-section 标签上添加 mj-bg-img 属性。

<mj-section mj-bg-img="https://example.com/your-image.jpg">
  <mj-column>
    <mj-text>
      This is your content.
    </mj-text>
  </mj-column>
</mj-section>

只在移动设备上显示背景图片

如果只想要在移动设备上显示背景图片，可以添加 mj-class 属性，并在 css 中设置 media query。

<mj-section mj-class="bg-primary">
  <mj-column>
    <mj-text>
      This is your content.
    </mj-text>
  </mj-column>
</mj-section>

然后在 css 中设置以下样式：

@media (max-width: 480px) {
  .mj-class-bg-primary {
    background-image: url(https://example.com/your-image.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

后记

通过本文的学习，我们了解了如何使用 mjml-section-bg-img。它的作用不仅仅只是为 mjml 的 section 标签添加背景图片，还可以设置响应式背景图片、覆盖整个 section 的背景图片，以及只在移动设备上显示背景图片。希望本文对大家在前端开发中有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f4d81e8991b448dcd23