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

Question

如果将图像设置为背景图像URL，如何在HTML电子邮件中使图像可点击？

通常，我会在“a href”中包装DIV，但我不确定这是否适用于电子邮件客户端？

为了裁剪并居中图像，该图像是背景图像（而不是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>

- user984003

---

不要在电子邮件中使用background-image - Outlook不支持它：https://www.campaignmonitor.com/css/ - mwl

为什么不尝试用一个a元素包裹div呢？只需确保在a上加上style =“display：block”即可！ - Mingle Li

Answer 1

在你想要点击的 div 元素内进行以下操作。

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

这将使链接的大小与整个div相同。

请记住，不同的电子邮件客户端对不同的CSS规则支持有所不同。您最好实际在正文中包含图像而不是在CSS中使用图像。

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

- Ares

---

刚在 Gmail 中测试了一下，不起作用。只有图片的顶部狭窄部分可以被点击。如果我在浏览器中打开 .html 文件，则整个图片都是可点击的。 - user984003

请记住，每个电子邮件客户端对不同CSS规则的支持是不同的。我已经上传了我的答案和一些参考资料。 - Ares

Answer 2

请访问backgrounds.cm获取几乎适用于所有电子邮件客户端的可靠背景（在不同的客户端支持下，使用Div背景图像可能不是一个好主意。最好使用TD）。

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

第二个选项就像之前所述 - 裁剪并重新上传，并使用img标签。

最后一个选项是尝试创建一个透明的“按钮”（弹性按钮 - buttons.cm），适合放置在背景图像上。这在各种客户端中的兼容性最差，并且也是最没有意义的操作方式。

- Gortonington