更改响应式电子邮件中的背景图片

Question

我有一封电子邮件，其中有一个带有背景图片的单元格。我需要为手机更改此图像 src。是否有可能做到这一点？我看到很多使用 <img> 标签的例子，但在我的例子中，这是一张背景图片。

我决定在 Outlook 中剪切背景图片（防弹背景还不够）所以我的代码基本上是这样的

<!--[if lt mso 9]> <!-->
<td
    background="https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet.png" bgcolor="#ffffff"
    valign="top" align="center"
    style="background-repeat: no-repeat;"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>
<!--<![endif]-->

<!--[if gte mso 9]>
 <td
    valign="top" align="center"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>

相反，我想在移动设备上使用 this image。我怎样才能做到这一点？（我可以选择复制代码并增加一些可见性类，但如果我的电子邮件太长，Gmail 会选择剪切可见部分，所以我想避免这种激烈的措施）

Answer 1

您需要定位包含图片的特定 class 并在移动设备上进行更改。

@media only screen and (max-width:480px) {
.red-carpet-bulletproof-background{background-image:url();width:300px; height:225px; background-size:100% auto;}
}

这是一个工作示例：

 @media only screen and (max-width:480px) {
 .table{width:300px !important;}
    .red-carpet-bulletproof-background{background-image:url('https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet-mobile.png') !important;width:300px; height:225px; background-size:100% auto;}
    }

<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td
    background="https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet.png" bgcolor="#ffffff"
    valign="top" align="center"
    style="background-repeat: no-repeat;"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod. Quisque aliquam lectus nec justo tincidunt iaculis. Pellentesque ultrices suscipit diam, a dapibus nulla. Aenean semper est at dapibus lacinia. Etiam semper lacinia dictum. Donec non fermentum eros. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
</td>
</tr>
</table>

让我知道这是否适合你。

更改响应式电子邮件中的背景图片

Change background image in responsive emails

html-email

zurb-ink

inky