Я пытаюсь создать новостную рассылку, которая работает в Outlook.
Она должна выглядеть (как в браузерах или хороших почтовых клиентах):
Но в Outlook 2019 это выглядит так:
Два вопроса:
Прозрачный фоновый рисунок просто белый и покрывает текст и изображение.
Второе прозрачное фоновое изображение полностью игнорируется.
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a,
a:focus,
a:hover {
color: inherit;
outline: 0;
text-decoration: none;
}
/* General */
body {
color: #ffffff;
font-family: 'Open Sans', 'Roboto', 'Segeo UI', Arial, sans-serif;
font-size: 16px;
}
a {
color: #ffffff;
text-decoration: underline;
}
.spacer-5 {
height: 5px;
}
.spacer-10 {
height: 10px;
}
/* Section */
.heading {
color: #000000;
font-size: 28px;
font-weight: bold;
max-width: 1160px;
margin-bottom: 5px;
padding: 10px 10px 10px 40px;
}
.content {
color: #000000;
font-weight: 600;
max-width: 1160px;
padding: 10px 10px 10px 40px;
}
.content a {
color: #000000;
}
</style>
<title>Newsletter</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="1200">
<table class="section" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td background="https://i.ibb.co/WDCt928/img-1.png" bgcolor="#dddddd" valign="top" style="background-size:cover;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1200px;">
<v:fill type="tile" size="100%,100%" src="https://i.ibb.co/WDCt928/img-1.png" color="#dddddd" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="spacer-10" colspan="2"></td>
</tr>
<tr>
<td background="https://i.ibb.co/TYkzN4c/transparent.png" class="heading" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://i.ibb.co/TYkzN4c/transparent.png"/>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="40"></td>
</tr>
<tr>
<td class="spacer-5" colspan="2"></td>
</tr>
<tr>
<td background="https://i.ibb.co/TYkzN4c/transparent.png" class="content">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://i.ibb.co/TYkzN4c/transparent.png"/>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="40"></td>
</tr>
<tr>
<td class="spacer-10" colspan="2"></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/0hb6Lqf4/