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

Question

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

我决定在 Outlook 中剪掉背景图片（防弹 bg 还不够）所以基本上我的代码看起来像这样

<!--[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

您需要定位包含图像的特定类并在移动设备上更改它。

@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>

让我知道这是否适合你。