В настоящее время я пытаюсь заставить фоновые изображения работать в outlook, чтобы создавать более креативные электронные письма. Я добавил пуленепробиваемый фон к td. И это показывает здорово везде.
Но не в перспективе. Я попытался изменить на Точки вместо px, с тем же результатом.
У кого-нибудь есть хорошая идея, как это можно решить?
Как это выглядит
Код, который я сделал:
<!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"
width="100%">
<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"
width="100%">
<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" width="100%">
<tbody>
<tr>
<td align="center" class="headerContent" height="140" 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" width="100%">
<tbody>
<tr>
<td align="left" style="padding-left: 30px;"><img alt="" height="50" 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;"
width="200"></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" width="624px" height="786" 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 width="100%" 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 height="45" src="https://promo.mantracgroup.com/l/617741/2019-10-08/glkpx/617741/68593/btn_sample.png" width="168"></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;" width="100%">
<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;" width="84"></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>