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>

请告诉我这是否适合您。

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

1 个答案: