防弹背景图像在 Outlook 中未正确显示 - 电子邮件
Posted
技术标签:
【中文标题】防弹背景图像在 Outlook 中未正确显示 - 电子邮件【英文标题】：Bulletproof background image not showing proper in Outlook - Email 【发布时间】：2020-07-03 23:43:42 【问题描述】：我目前正在尝试让背景图像在 Outlook 中工作，以便能够创建更具创意的电子邮件。我已将防弹背景添加到td。它在其他任何地方都表现出色。
但不是在前景中。我曾尝试更改为 Points 而不是 px，结果相同。
有没有人知道如何解决这个问题？
How it looks
我做的代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<style type="text/css">
#outlook a
padding: 0;
.body
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
.ExternalClass
width: 100%;
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div
line-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
mso-line-height-rule: exactly;
img
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
a img
border: none;
p
margin: 1em 0;
table td
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
/* hide unsubscribe from forwards*/
blockquote .original-only,
.WordSection1 .original-only
display: none !important;
@media only screen and (max-width: 480px)
body,
table,
td,
p,
a,
li,
blockquote
-webkit-text-size-adjust: none !important;
/* Prevent Webkit platforms from changing default text sizes */
body
width: 100% !important;
min-width: 100% !important;
/* Prevent ios Mail from adding padding to the body */
#bodyCell
padding: 10px !important;
#templateContainer
max-width: 600px !important;
width: 100% !important;
h1
font-size: 24px !important;
line-height: 125% !important;
h2
font-size: 20px !important;
line-height: 125% !important;
h3
font-size: 18px !important;
line-height: 125% !important;
h4
font-size: 16px !important;
line-height: 125% !important;
#templatePreheader
display: none !important;
/* Hide the template preheader to save space */
#logoImage
height: auto !important;
max-width: 150px !important;
width: 100% !important;
.headerContent
font-size: 20px !important;
line-height: 125% !important;
#bodyImage
height: auto !important;
max-width: 560px !important;
width: 100% !important;
.bodyContent
font-size: 18px !important;
line-height: 125% !important;
.templateColumnContainer
display: block !important;
width: 100% !important;
.bannerImage
height: auto !important;
max-width: 460px !important;
width: 100% !important;
.imageContent,
.container
padding-left: 0px!important;
padding-right: 0px!important;
.footerContent
font-size: 12px !important;
line-height: 115% !important;
</style>
<body bgcolor="#191919" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #191919; margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #191919; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important"
>
<tbody>
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important;margin: 0; padding: 0 0 20px 0;" valign="top">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 624px;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templatePreheader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #000000; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt"
>
<tbody>
<tr>
<td align="center" class="preheaderContent" pardot-region="preheader_content00" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #ffffff; font-family: Helvetica; font-size: 10px; line-height: 12px; text-align: center; letter-spacing:2; padding: 15px 20px;"
valign="top">OFFICIAL COMMUNICATION</td>
</tr>
</tbody>
</table>
<!-- // END PREHEADER -->
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #191919; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" >
<tbody>
<tr>
<td align="center" class="headerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #191919; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt" >
<tbody>
<tr>
<td align="left" style="padding-left: 30px;"><img id="logoImage" src="https://promo.mantracgroup.com/l/617741/2019-09-23/ftgc4/617741/66681/Logo_Mantrac.png" style="-ms-interpolation-mode: bicubic; height: auto; outline: none; text-decoration: none; max-width: 200px; border: 0;"
></td>
<td align="right" pardot-region="phone_content00" style="padding-top:12px;padding-right:30px;color: #FEC70B !important; display: block; font-family: Helvetica,sans-serif; font-size:24px; font-style: normal;text-transform:uppercase; font-weight: bold; letter-spacing: normal;margin: 0; text-align: right">
<font color="#FEC70B" face="Helvetica,sans-serif">000-0000-0000</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td background="https://promo.mantracgroup.com/l/617741/2020-03-23/th6sg/617741/89519/CRC_ghana_bg_email.png" bgcolor="#2c363a" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:100;width:624px;height:786px;">
<v:fill type="tile" src="https://promo.mantracgroup.com/l/617741/2020-03-23/th6sg/617741/89519/CRC_ghana_bg_email.png"color="#2c363a"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" celllspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="color: #FEC70B !important; margin-left:-30px!important; display: block; font-family: Helvetica,sans-serif; font-size: 38px; font-style: normal;text-transform:uppercase; font-weight: bold; letter-spacing: normal; line-height: 43px; text-align:left!important; margin: 0; margin-top:15px; text-align: center;padding-bottom:25px;padding-left:10%;padding-right:10%;"><span style="color:#FFFFFF;"><font face="Helvetica,sans-serif;display:block;">WONDER WHERE YOUR EQUIPMENT COMES BACK TO LIFE?</font></span></td>
</tr>
<tr>
<td>
<p style="text-align:left;margin:0; padding-left:10%;">
<a href="#"><img src="https://promo.mantracgroup.com/l/617741/2019-10-08/glkpx/617741/68593/btn_sample.png" ></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<!--begin content -->
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<!-- End content -->
<!-- BEGIN FOOTER -->
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;mso-table-lspace: 0pt; mso-table-rspace: 0pt;background-color:#000000;" >
<tbody>
<tr>
<td align="center" style="padding-top: 30px;"><img src="https://promo.mantracgroup.com/l/617741/2019-09-23/ftgc4/617741/66681/Logo_Mantrac.png" style="-ms-interpolation-mode: bicubic; height: auto; outline: none; text-decoration: none; max-width: 84px; border: 0;" ></td>
</tr>
<tr>
<td align="center" class="footerContent" pardot-region="footer_content01" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #D8D8D8; font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: center; padding: 20px 30px 10px 30px;"
valign="top">© Current_Year Mantrac Group. All rights reserved.</td>
</tr>
<tr>
<td align="center" class="footerContent original-only" pardot-region="footer_content02" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #D8D8D8; font-family: Helvetica; font-size: 10px; line-height: 15px; text-align: center; padding: 0 30px 20px;"
valign="top">You’re receiving this email because you’ve agreed to receive notifications from Mantrac Group. If you’d prefer not to receive updates, you can <a href="EmailPreferenceCenter" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #D8D8D8; font-weight: normal; text-decoration: underline;">manage your preferences</a> or <a href="Unsubscribe" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #D8D8D8; font-weight: normal; text-decoration: underline;">unsubscribe from all</a>.</td>
</tr>
</tbody>
</table>
<!-- END FOOTER -->
</body>
</html>【问题讨论】：
【参考方案1】：我认为mso-width-percent:100; 应该是mso-width-percent:1000;
编辑：mso-width-percent 值除以 10：
起初可能看起来很混乱，但 mso-width-percent 实际上很简单。您需要传递给它的数字是您想要的百分比的十倍。这意味着 mso-width-percent: 1000;实际上是 100%，或全页宽度
来源：https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds/
【讨论】：
一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。以上是关于防弹背景图像在 Outlook 中未正确显示 - 电子邮件的主要内容，如果未能解决你的问题，请参考以下文章