Question

如果将图片设置为背景图片网址，如何在HTML电子邮件中点击图片？

通常情况下，我只是将DIV包装在＆＃34; a href＆＃34;中，但我不确定它是否适用于电子邮件客户端？

图像是背景图像（与img相对），以便裁剪并居中。

<table width="230"  cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
  <tr>
    <td width="15" bgcolor="red">&nbsp;</td>
    <td width="200" bgcolor="959595" align="left" style="padding: 0px;">
        <div style = "height:200px;width:200px;background-image:url('http://www.thisiscolossal.com/wp-content/uploads/2013/01/snow.jpg');background-position: center center;">
    </div>
    </td>
    <td width="15" bgcolor="red">&nbsp;</td>
  </tr>
</table>

Answer 1

在您要点击的div内，执行以下操作

<a href="/destination" style="display:block; width:100%; height:100%;">&nbsp;</a>

这将使链接成为整个div的大小。

请注意，不同的电子邮件客户端对不同的CSS规则有不同的支持。实际上，您可能更好地将图像包含在正文中而不是CSS中。

以下是电子邮件客户端对CSS支持的一些参考：
https://www.campaignmonitor.com/css/

Answer 2

查看backgrounds.cm以获得几乎所有电子邮件客户端的防弹背景（Div背景图片在客户支持中不是一个好主意。最好使用TD）。

至于你的答案，你可以制作一个与父元素大小相同的透明PNG图像，然后在其上使用href。只需确保尺寸与Outlook完全匹配即可。

第二个选项与之前说过的一样 - 裁剪并重新上传并使用img标记。

最后一个选项是尝试创建一个适合背景图像的透明“按钮”（防弹按钮 - buttons.cm）。这是客户端中最不兼容的，也是最不合理的。

当图像是DIV背景图像时，使图像可以在电子邮件HTML中单击

2 个答案: