1

我正在编码Email Templates。给我的 Psd 就是要转换成电子邮件的模板是rounded corners有的和一些background images.
使用背景图像和图像制作圆角表好还是我应该用它 来css制作。rounded cornersbackground images

4

3 回答 3

3

使用图像作为角落。您不会让边界半径在所有客户端上正常工作。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>
于 2013-02-20T16:19:16.447 回答
3

背景图片

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

如果 PSD 有大面积的背景图像，但上面没有文字，您可以将电子邮件的那部分剪切为前景图像。

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

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

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

HTML 电子邮件中的 bg 图像的影响，以及尽量减少使用它们的需要，应该尽早并经常地传达给设计师，因为它的问题在他们之间不是常识，即使在他们中最好的人之间也是如此。

圆角

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

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

于 2013-02-21T17:07:19.830 回答
0

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

见： http: //www.campaignmonitor.com/css/

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

于 2013-02-20T02:18:11.240 回答