HTML电子邮件页脚问题
HTML电子邮件页脚问题
提问于 2021-10-12 21:40:19
非常抱歉，但我一直在为一个看似如此简单的问题而努力。
实际上，我已经创建了一个HTML电子邮件模板，并且需要将页脚的底部从颜色更改为图像本身。
我已经用下面的代码尝试过了，但是图像是
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0; background-color: #02d19b; background-image: url('C:\Users\Jimmy\Documents\file-store\Email\images\footerster9605468.png'); background-repeat: no-repeat;" width="640">
<tbody>
<tr>
<th class="column" style="mso-table-lspace: 0; mso-table-rspace: 0; font-weight: 400; text-align: left; vertical-align: top; padding-left: 20px; padding-right: 20px;" width="33.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="text_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0; word-break: break-word;" width="100%">
<tr>
<td style="padding-top:20px;">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 12px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #f3f2f2; line-height: 1.2;">
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left;">Ourwebstie.com</p>
<p style="margin: 0; font-size: 14px; text-align: left;">2021 © All rights reserved</p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="image_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="padding-bottom:25px;padding-left:5px;padding-right:5px;padding-top:5px;width:100%;">
<div style="line-height:10px"><a href="http://www.example.com/" style="outline:none" tabindex="-1" target="_blank"><img alt="Logo" src="../../../../Downloads/-2toy3a30o3r(1)/images/stripe-1920w.png" style="display: block; height: auto; border: 0; width: 163px; max-width: 100%;" title="Logo" width="163"/></a></div>
</td>
</tr>
</table>
</th>
<th class="column" style="mso-table-lspace: 0; mso-table-rspace: 0; font-weight: 400; text-align: left; vertical-align: top; padding-left: 20px; padding-right: 20px;" width="33.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="text_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0; word-break: break-word;" width="100%">
<tr>
<td style="padding-bottom:10px;padding-top:20px;">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 14px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; line-height: 1.2;">
<p style="margin: 0; font-size: 14px; text-align: left; letter-spacing: 2px;"><span style="font-size:18px;">Contact:</span></p>
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="menu_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="color:#f3f2f2;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;text-align:left;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="text-align:left;font-size:0px;">
<div class="menu-links">
<!--[if mso]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="padding-top:10px;padding-right:0px;padding-bottom:5px;padding-left:0px">
<![endif]--><span class="label" style="padding-top:10px;padding-bottom:5px;padding-left:0px;padding-right:0px;display:block;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;color:false;letter-spacing:normal;">Mobile Number Here </span>
<!--[if mso]></td></tr><tr><td style="text-align:left;padding-top:10px;padding-right:0px;padding-bottom:5px;padding-left:0px"><![endif]--><a href="mailto:hello@company.co.uk" style="padding-top:10px;padding-bottom:5px;padding-left:0px;padding-right:0px;display:block;color:#f3f2f2;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;text-decoration:none;letter-spacing:normal;">ourwebsite@email.com</a>
<!--[if mso]></td></tr></table><![endif]-->
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="social_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="padding-top:20px;text-align:left;padding-right:0px;padding-left:0px;padding-bottom:20px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="social-table" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="126px">
<tr>
<td style="padding:0 10px 0 0;"><img alt="Facebook" height="32" src="../../../../Downloads/-2toy3a30o3r(1)/images/facebook2x.png" style="display: block; height: auto; border: 0;" title="facebook" width="32"></td>
<td style="padding:0 10px 0 0;"><img alt="Twitter" height="32" src="../../../../Downloads/-2toy3a30o3r(1)/images/twitter2x.png" style="display: block; height: auto; border: 0;" title="twitter" width="32"></td>
<td style="padding:0 10px 0 0;"><img alt="Instagram" height="32" src="../../../../Downloads/-2toy3a30o3r(1)/images/instagram2x.png" style="display: block; height: auto; border: 0;" title="instagram" width="32"></td>
</tr>
</table>
</td>
</tr>
</table>
</th>
<th class="column" style="mso-table-lspace: 0; mso-table-rspace: 0; font-weight: 400; text-align: left; vertical-align: top; padding-left: 20px; padding-right: 20px;" width="33.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="image_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="padding-bottom:50px;padding-left:30px;padding-right:30px;padding-top:50px;width:100%;">
<div style="line-height:10px"><a href="http://www.example.com/" style="outline:none" tabindex="-1" target="_blank"><img alt="Logo" src="../../Unnamed Site 2/logo - new.png" style="display: block; height: auto; border: 0; width: 113px; max-width: 100%;" title="Logo" width="143"/></a></div>
</td>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
这是我得到的结果：
我理解颜色是由于背景颜色代码而存在的，但我确定背景图像应该覆盖它？即使我删除了背景颜色代码，所有内容也会消失。
我将非常感谢您在这个困境中的帮助。
诚挚的问候,
吉米
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-12 21:47:14
图像不起作用，因为您指向本地C:。将图像托管在某个地方，您将看到您的代码正常工作。
或者，尝试使用HTML File Paths指向它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69547327
复制相关文章
相似问题
腾讯云开发者
