电子邮件NewsLetter背景图片和圆角

Question

我正在编写Email Templates代码。给我的私营部门，是要转换为电子邮件模板是有rounded corners和一些background images。

使用背景图像和图像制作圆角桌子好吗?或者我应该使用css和background images一起制作rounded corners吗？

Answer 1

使用图像作为你的角落。您不会让边框半径在所有客户端上都能正常工作。10x10透明.png是最佳选择。我没有制作圆角图像，但你应该从这个例子中得到这个想法：

<table width="320" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#959595">
  <tr>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>
    <td width="100" height="10">
    </td>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>    
  </tr>
  <tr>
    <td width="10">
    </td>
    <td width="300">
      Here is your content<br>...<br>...<br>...
    </td>
    <td width="10">
    </td>    
  </tr>
    <tr>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>
    <td width="100" height="10">
    </td>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>    
  </tr>
</table>

Answer 2

背景图片

基本上，如果你需要支持各种各样的电子邮件阅读器，背景图片根本不是一个选择。它主要影响Outlook2007和更高版本，以及Hotmail (还没有测试Outlook.com )。

如果PSD有一个很大的区域，上面有bg图像，但上面没有文本，您可以将电子邮件的这一部分剪切为前景图像。

如果同一区域有文本内容，则有3个选项：

1. 使用内联CSS跳过bg图像altogether.
2. Implement bg图像，并以优雅的降级为目标(接受电子邮件在某些电子邮件阅读器中看起来不太好)。
3. 将电子邮件的这一部分剪切为单个前景图像(带有图像中的文本)。在图像中剪切文本的风险是它影响可用性(许多电子邮件阅读器默认阻止外部图像)，它损害可访问性，最重要的是，如果文本与图像的比例变得太低，将触发垃圾邮件过滤器。因此，尽可能少做这件事(将文本作为图像)是一个好主意。但偶尔喝一点通常是安全的。

在选择选项1或选项2之前，您可能需要与设计团队进行沟通。在做大量的选项3之前，明智的做法是在各种垃圾邮件过滤器中测试它。

bg图像在HTML电子邮件中的影响，以及将它们的使用降至最低的必要性，应该尽早并经常与设计师沟通，因为与它相关的问题在他们之间并不是常识，即使是他们中最优秀的人也不例外。

圆角

正如@samanthasquared提到的，圆角在电子邮件阅读器中没有得到很好的支持。它们需要实现为图像(或者，与背景图像一样，可以跳过它们，或者选择优雅的降级，如果设计团队可以接受的话)。

如果您剪切整个顶部的单个图像和整个底部的单个图像，而不是为每个单独的角落剪切单独的图像，则可以减少用户必须下载的图像总数。更少的图像意味着更快的加载速度和更低的触发垃圾邮件过滤器的风险。

Answer 3

在电子邮件客户端中对border-radius的支持非常差，而如果支持更多，background-image将不会显示在Outlook 2007+中。

请参阅：http://www.campaignmonitor.com/css/

此外，为了获得最佳的跨客户端支持，所有的CSS都必须是内联的，并且您应该使用table。