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

问题描述

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

但是在 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" 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" 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,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>

解决方法

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

所以您的最终 HTML 存在一些问题。

您有 div 包装每个 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" 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-templates html html-email outlook