Я создаю электронные письма в формате HTML и хотел бы, чтобы фоновое изображение в разделе строки таблицы отображало фоновые изображения за ячейками таблицы в этой строке.
Насколько я понимаю, для Microsoft Outlook мне нужно использовать структуру таблиц и читать такие статьи:
https://www.emailonacid.com/blog/article/email-development/html-background-images-in-email/ http://www.emaildesignreview.com/email-code/html-bulletproof-background-images-in-email-3850/ https://backgrounds.cm/ https://buttons.cm/
Эти страницы задают ширину и высоту, но мне нужна динамическая ширина и высота, которые заполняют строку таблицы за содержимым строки таблицы.
Я уже пробовал VML, и он помещает фон поверх фона и портит ширину таблицы.
Пока я захожу так далеко с таким макетом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width" name="viewport"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
</head>
<body id="body">
<div style="display: block; width: 100%;">
<table role="presentation" align="center" width="600" style="border-collapse: collapse; table-layout: fixed;mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout:fixed; width: 600px;">
<tr cellpadding="0" cellspacing="0" background="img.jpg" style="background-image: url(img.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;">
<!--[if mso]>
<v:rect fill="true" stroke="false" style="width: 600px;">
<v:fill type="frame" src="img.jpg"/>';
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
</v:rect>
<![endif]-->
<td colspan="3">
<p style="text-align: center;">Heading</p>
</td>
</tr>
<tr>
<td width="50%" height="100px"><p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, <a href="#">justo</a>. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p></td>
<td width="50%" height="100px"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p></td>
</tr>
</table>
</div>
</body>
</html>
И я экспериментировал со встроенными стилями с mso-width-percent, mso-height-percent, width, height. Все еще не соответствует указанным 600px. Я бы хотел, чтобы фон был похож на этот CSS:
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Однако текстовое поле v: не годится, так как содержимое будет иметь ссылки, указанные в ячейке таблицы.
С клиентами, поддерживающими CSS, он работает так, как ожидалось, и намного проще, но не работает с Outlook.
