电子邮件设计：背景图片上的文字

Question

我正在尝试为具有背景图像和居中文本的电子邮件创建 header。这是它在“普通”电子邮件客户端中的样子：

然而在 outlook 中它并没有停止工作，它最终是这样的：

有没有电子邮件专家可以帮助我解决这个问题？

这是我目前所拥有的（内置反应）：

<table width="640" cellPadding="0" cellSpacing="0" align="center" style={{ margin: '0 auto' }}>
    <tbody>
    <tr>
        <td
            height="143"
            width="640"
            align="center"
            valign="middle"
            background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
            style={{ backgroundColor: '#00A699', backgroundSize: 'cover' }}
        >
            <div
                dangerouslySetInnerHTML={{
                    __html: `<!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
                          <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
                          <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
                          <![endif]-->`,
                }}
            />
            <table
                cellPadding="0"
                cellSpacing="0"
                className="arb_w100 "
                align="center"
                style={{ margin: '0 auto' }}
            >
                <tbody>
                <tr>
                    <td align="center">
                        <td
                            align="center"
                            valign="bottom"
                            className="arb_headline_1"
                            style={{ paddingTop: '10px' }}
                        >
                                            <span
                                                style={{
                                                    fontSize: '22px',
                                                    fontWeight: 400,
                                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                                    lineHeight: '28px',
                                                    color: '#ffffff',
                                                }}
                                            >
                                                For a limited time, take
                                            </span>
                        </td>
                    </td>
                </tr>
                </tbody>
            </table>
            <div
                dangerouslySetInnerHTML={{
                    __html: `<!--[if gte mso 9]>
                          </v:textbox>
                        </v:rect>
                      <![endif]-->`,
                }}
            />
        </td>
    </tr>
    </tbody>
</table>

下面是从上面翻译成标准的代码 HTML:

<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
    <tbody>
    <tr>
        <td height="143" width="640" align="center" valign="middle"
            background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
            style="background-color:#00A699;background-size:cover">
            <div><!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
                          <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
                          <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
                          <![endif]--></div>
            <table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
                <tbody>
                <tr>
                    <td align="center">
                        <td align="center" valign="bottom" className="arb_headline_1" style="padding-top: 10px;"><span
                            style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
                        </td>
                    </td>
                </tr>
                </tbody>
            </table>
            <div><!--[if gte mso 9]>
                          </v:textbox>
                        </v:rect>
                      <![endif]--></div>
        </td>
    </tr>
    </tbody>
</table>

Answer 1

感谢您提供最后的 HTML，帮助很大！

所以你的期末考试有几个问题 HTML。

您有 divs 包装每个 MSO 片段，这实际上关闭并中断了片段。因此，删除第一个 MSO 片段的结束 div 标签和第二个片段的开始 div 标签。
您需要将这两个标签移入，因此它只是包装您的内部内容。我们通常添加一个 div 来包装内部内容，以帮助在 Outlook 中重置 HTML 然后我们可以在内部内容中设置任何样式等。
然后我注意到你有双倍的内部标签。删除外部标签，因为它们没有声明任何样式，而内部标签有。

修改这些小细节将解决您的问题。

这里是清理过的片段，以防我的说明没有意义：

<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
<tbody>
    <tr>
        <td height="143" width="640" align="center" background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" style="background-color:#00A699;background-size:cover">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
            <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
            <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
            <![endif]-->
            <div>
            <table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
                <tbody>
                    <tr>
                        <td align="center" className="arb_headline_1" style="padding-top: 10px;"><span style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</tbody>
</table>

电子邮件设计：背景图片上的文字

Email Design: Text over background image

html

outlook

html-email

email-templates