Question

我正在编码Email Templates。向我提供的要转换为电子邮件模板的Psd包含rounded corners和一些background images。
使用背景图像和图像制作圆角表是否合适，或者我应该使用css与rounded corners一起制作background images。

Answer 1

为角落使用图像。您不会让border-radius在所有客户端上正常工作。 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

背景图片

基本上，如果您需要支持各种电子邮件阅读器，背景图像根本不是一个选项。它主要影响Outlook 2007及更高版本，以及Hotmail（尚未测试Outlook.com）。

如果PSD的大区域有bg图像但顶部没有文字，则可以将该部分电子邮件剪切为前景图像。

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

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

在选择选项1或2之前，您可能需要与设计团队一起清除它。在做大量的选项3之前，最好在各种垃圾邮件过滤器中进行测试。

bg图像在HTML电子邮件中的影响以及最大限度地减少使用它们的必要性应该尽早并经常地传达给设计人员，因为它们之间的问题不是常识，即使是最好的

圆角

正如@samanthasquared所提到的，电子邮件阅读器不支持圆角。它们需要实现为图像（或者，与背景图像一样，如果设计团队可以接受，则可以选择跳过它们或选择优雅降级）。

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

Answer 3

border-radius在电子邮件客户端中支持得非常差，虽然有更多支持，但{2007年+}中不会显示background-image。

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

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

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

3 个答案: