我已经使用漆黑的衬里创建了完全响应的电子邮件和内联样式,但是gmail似乎在削减url('content url')。我没有在电子邮件的顶部和底部看到图像。这是电子邮件的代码:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Сборка календарей на 2019 год от типографии Асса</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST", location.hostname));
//]]></script><script async="" src="/browser-sync/browser-sync-client.js?v=2.26.3"></script>
<!--[if gte mso 10]>
<v:rect style="width: значение; height: значение;" strokecolor="none">
<v:fill type="tile" src="картинка"></v:fill>
</v:rect>
<v:shape style="position: absolute; width: значение; height: значение;">
<![endif]-->
<!--[if gte mso 10]>
</v:shape>
<![endif]-->
<span class="preheader"></span>
<table class="body">
<tbody><tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<table class="spacer float-center"><tbody><tr><td height="90px" style="font-size:90px;line-height:90px;"> </td></tr></tbody></table>
<table style="background:rgb(255, 255, 255)" align="center" class="container float-center"><tbody><tr><td>
<table class="row"><tbody><tr>
<th class="small-12 large-12 columns first last" style="background:url('http://cartonbox.com.ua/images/email/dist/assets/img/top.png'); background-size:100% 100%;"><table><tbody><tr><th>
<table class="spacer"><tbody><tr><td height="120px" style="font-size:120px;line-height:120px;"> </td></tr></tbody></table>
</th>
<th class="expander"></th></tr></tbody></table></th>
</tr></tbody></table>
<table class="row"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tbody><tr><th>
<h3 class="text-center" style="color:rgb(20,20,210);font-weight:900;letter-spacing:0;padding:0;margin:0;line-height:1;">ТОЛЬКО ДЛЯ ТИПОГРАФИЙ</h3>
<h3 class="text-center" style="color:rgb(20,20,210);font-weight:900;letter-spacing:0;padding:0;margin:0;">И РЕКЛАМНЫХ АГЕНСТВ</h3>
Для тех, кому важно решить подобную проблему, кто находится в поиске надежного партнера.<br>
Мы подготовили специальное предложение по сборке тиражей календарей на 2019 год.<br>
Мы не понаслышке знаем: Какие цвета чаще пружины заказывают в предновогодний период?<br>
Что выгоднее устанавливать люверс или курсор?<br>
Как собрать 1000 календарей на 3 пружины за 1 день?<br>
Ведь мы на своем опыте прошли путь ручных процессов.<br>
Мы автоматизировали все, связанное со сборкой!<br>
Специально для вас приготовлены пружины разных цветов и размеров, чтобы гарантировать сроки производства.<br>
Теперь с радостью предлагаем вам воспользоваться нашими достижениями и значительно восполнить объем продукции и соответственно своей прибыли, размещая заказ на сборку календарей у нас.
Пробный прайс<br>
мы вышлем по вашему запросу<br>
Пишите, звоните! Мы будем рады быть полезными Вам.
<center style="margin-top:40px;" data-parsed="">
<table class="button large text-center float-center"><tbody><tr><td><table><tbody><tr><td>
<a href="">узнать стоимость</a>
</td></tr></tbody></table></td></tr></tbody></table>
</center>
<table class="spacer"><tbody><tr><td height="16px" style="font-size:16px;line-height:16px;"> </td></tr></tbody></table>
</th>
<th class="expander"></th></tr></tbody></table></th>
</tr></tbody></table>
<table style="width:100%!important" "="" class="row"><tbody><tr>
<th class="small-12 large-6 columns first last" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
</th><th class="text-center; small-2 large-2 columns first" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
</th></tr></tbody></table></th>
<th class="text-center; small-4 large-4 columns" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
<p style="color:#100793 !important;padding:0 0 10px 0;margin:0 0 0">Заник Екатерина</p>
</th></tr></tbody></table></th>
<th class="text-center; small-2 large-2 columns last" style="font-weight:900;padding:0!important;margin:0"><table><tbody><tr><th>
</th></tr></tbody></table></th>
</tr></tbody></table></th>
</tr></tbody></table><table style="margin:0;padding:0;" class="row"><tbody><tr>
<th class="small-12 large-12 columns first last" style="background:url('http://cartonbox.com.ua/images/email/dist/assets/img/footer.png');background-size:100% 100%"><table><tbody><tr><th>
<table class="spacer"><tbody><tr><td height="110px" style="font-size:110px;line-height:110px;"> </td></tr></tbody></table>
</th><th class="text-center small-3 large-3 columns first"><table><tbody><tr><th>
</th></tr></tbody></table></th>
<th class="text-center small-7 large-7 columns"><table><tbody><tr><th>
исполнительный директор<br>
Типографии АССА
</th></tr></tbody></table></th>
<th class="text-center small-2 large-2 columns last"><table><tbody><tr><th>
</th></tr></tbody></table></th>
<th class="expander"></th></tr></tbody></table></th>
</tr></tbody></table>
</td></tr></tbody></table></center></td></tr></tbody></table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body></html>
我想找到有关Google backgound url规则的文章或google当前限制或Zurb文档。是否有人使用Gmail的基础电子邮件版本? 问候, 马克西姆
答案 0 :(得分:0)
您可以在表格单元格上使用background
属性。
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="http://cartonbox.com.ua/images/email/dist/assets/img/top.png" bgcolor="#ffffff" 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="http://cartonbox.com.ua/images/email/dist/assets/img/top.png" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Your content to go on top of the image here.
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Campaign Monitor是一个不错的工具,可以在这里为您生成代码: https://backgrounds.cm/