你会如何解决这个问题？图像重叠 2 种纯色的电子邮件设计

问题描述

我在 Marketo 中使用 Marketo 2.0 语法开发了基于模块的电子邮件模板。

我的客户设计了一个外观漂亮的模块，其中图像重叠了 2 种纯色。如果是网页设计，没问题，但对于电子邮件，不知道该怎么做。 我唯一的好主意是做一个带有行和列跨度的表格。那里有更好的吗？您认为负边距在电子邮件中有效吗？

他们要求它看起来像什么：

我的台词显示了我将如何构建一个表来支持它：

解决方法

这是一个很好的方法（使用表格）。负利润率没有很大的支持。

您也不能依赖 colspan 和 rowspan，因为 Windows 上的 Outlook 桌面不支持它们。但是，对于要使用它的部分，您需要做的就是嵌套表格。

即而不是中间部分：

<table>
        <tr>
            <td bgcolor="xxx">&nbsp;</td>
            <td rowspan="2">&nbsp;</td>
            <td bgcolor="xxx">&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

你需要这样一行：

<table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td bgcolor="xxx">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
            <td>&nbsp;</td>
            <td>
                <table>
                    <tr>
                        <td bgcolor="xxx">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

,

您可以伪造绝对定位，然后使用 VML 来支持 Outlook，请参阅 Steven Sayo 的精彩 Overlay & Email Absolute Positioning 教程。