如何解决电子邮件设计:背景图片上的文字
我正在尝试为具有背景图像和文本居中的电子邮件创建标题。这是它在“普通”电子邮件客户端中的样子:
但是在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。