mjml 将 mj-wrapper 背景位置向右对齐

Question

我尝试将 mj-wrapper 的背景位置右对齐，但没有成功，但我不知道该怎么做。

这是我的代码：

<mj-wrapper mj-class="hero" border="1px solid #000000" padding="50px 30px" background-url="https://i.picsum.photos/id/873/214/135.jpg" background-repeat="no-repeat">
  <mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px">
    <mj-column>
      <mj-text color="#009f82" font-size="17px" font-weight="bold" padding="20px 0 40px 0">
          Lorem Ipsum,
      </mj-text>
      <mj-text>
          Lorem Ipsum 2
      </mj-text>
    <mj-text>
          Lorem Ipsum 3
      </mj-text>
    </mj-column>
  </mj-section>
  <mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa">
    <mj-column border="1px solid #dddddd">
      <mj-text css-class="hero-style" padding="20px"> First line of text !! </mj-text>
      <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" />
      <mj-text padding="20px"> Second line of text </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>

我试过：

<mj-class name="hero" text-align="right" text-align="right" background-color="yellow" background-position="top right" />

还有：

    </mj-attributes>
<mj-style inline="inline">
    .hero-style {
        text-align: right;
        background-color: red;
        color: red;
        background-position: top right;
    }
</mj-style>

但是没用。有帮助吗？

Answer 1

只需将其作为属性添加到 <mj-wrapper />:

<mj-wrapper 
 background-position="right"
 background-url="https://i.picsum.photos/id/873/214/135.jpg" 
 background-repeat="no-repeat"
>
...
</mj-wrapper>

请注意，outlook 中可能有一些 limitations/issues。我不知道。按照 link 查看整个列表（滚动底部）：https://www.npmjs.com/package/mjml-wrapper

P.S.: 适用于 MJML 版本 @^4.7.

mjml 将 mj-wrapper 背景位置向右对齐

mjml align mj-wrapper background-position to the right

email

outlook

newsletter

mjml