Gmail拒绝呈现图片背景url属性

时间:2018-12-21 16:58:20

标签: javascript email zurb-foundation zurb-ink

我已经使用漆黑的衬里创建了完全响应的电子邮件和内联样式,但是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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>


</body></html>

我想找到有关Google backgound url规则的文章或google当前限制或Zurb文档。是否有人使用Gmail的基础电子邮件版本? 问候, 马克西姆

1 个答案:

答案 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/