Кликабельное фоновое изображение в электронной почте - проблема Outlook

Question

Я использую пуленепробиваемый метод для наложения некоторого текста поверх изображения, чтобы оно выглядело так:

Мой код выглядит следующим образом(не уверен, почему изображение не отображается во фрагменте, вставляя HTML-код в браузер, который он покажет):

<table>
    <tr>
        <td class="ppp-ideabooks__image" background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" bgcolor="#fff" style="width: 340px; height: 198px; vertical-align: bottom; padding: 0;">
           <!--[if gte mso 9]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:340px;height:198px;">
              <v:fill type="tile" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
              <v:textbox inset="0,0,0,0">
                 <![endif]--> <a class="ppp-ideabooks__link" href="#" style="display: block; width: 100%; height: 90%;"></a>
                 <p class="ppp-ideabooks__text" style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">
                    "COOL CARS"
                 </p>
                 <!--[if gte mso 9]>
              </v:textbox>
           </v:rect>
           <![endif]-->
        </td>
    </tr>
</table>

Это прекрасно работает, но в Outlook это выглядит так:

Кто-нибудьзнаете, как решить эту проблему для Outlook?Обратите внимание, что я пытаюсь сделать изображение кликабельным, поэтому у меня тоже есть тег <a> ...

Спасибо!

Answer 1

Я изменил несколько вещей в вашем коде, и результат находится внизу этого ответа.

В основном у вас был тип как плитка (<v:fill type="tile").Это будет мозаичное изображение, когда содержание внутри блока больше.Если у вас нет фона, который должен быть мозаичным, вы можете выбрать <v:fill type="frame".

. Я также добавил таблицу в комментарии, так как абзацы могут использовать нежелательные пробелы (над и под текстом), если CSSне применяется должным образом.Первая строка - это пробел, вторая строка имеет текст в виде ссылки.

Редактировать - Добавлено следующее:

• href в VML
• условное пространство для Outlooks
• тег span для зеленой полосы
• , дополняющий href, чтобы сделать весь блок кликабельным

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="top" class="ppp-ideabooks__image" background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" bgcolor="#fff" style="width: 340px; height: 198px; padding: 0;vertical-align: top;">
           <!--[if gte mso 9]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" href="http://www.google.com" fill="true" stroke="false" style="width:340px;height:198px;">
              <v:fill type="frame" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
              <v:textbox inset="0,0,0,0">
                 <![endif]--> 
            
                <table border="0" cellpadding="0" cellspacing="0">
                    <!--[if gte mso 9]>
                    <tr>
                        <td style="height:171px;"></td>
                    </tr>
                    <![endif]-->
                    <tr>
                        <td class="ppp-ideabooks__text" style=""><a class="ppp-ideabooks__link" href="#" style="display: inline-block;box-sizing: border-box; cursor: pointer; text-decoration: none;padding: 170px 204px 0px 0px;">
                         
                            <span style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">"COOL CARS"</span></a>
                         </td>
                    </tr>
            </table>
                 <!--[if gte mso 9]>
              </v:textbox>
           </v:rect>
           <![endif]-->
        </td>
    </tr>
</table>

Как приведенный выше код отображается в Litmus (февраль / 2019)

Надеюсь, что этоответ, который вы получили после.

Answer 2

Клиенты Outlook игнорируют довольно много стилевых свойств, а не отображают таблицы так, как вы ожидаете время от времени.Судя по вашему скриншоту, кажется, что указанная высота таблицы не учитывается в Outlook.

Я предлагаю вам попробовать вместо этого установить ширину и высоту для свойств таблицы и td.

<table width="340" height="198" cellpadding="0" cellspacing="0">
<tr>
    <td background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" width="340" height="198" style="width: 340px; height: 198px; vertical-align: bottom; padding: 0;">
       <!--[if gte mso 9]>
       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:340px;height:198px;">
          <v:fill type="tile" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
          <v:textbox inset="0,0,0,0">
             <![endif]--> <a href="#" style="display: block; width: 100%; height: 90%;"></a>
             <p class="ppp-ideabooks__text" style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">
                "COOL CARS"
             </p>
             <!--[if gte mso 9]>
          </v:textbox>
       </v:rect>
       <![endif]-->
    </td>
</tr>

Я предполагаю, что изображение в вашем фрагменте не отображается, поскольку оно подается через http.Если фрагмент содержит весь HTML-текст сообщения, рассмотрите возможность добавления в него тегов HTML, заголовка и тела для повышения доставляемости.

Пример ниже не протестирован, так как в данный момент у меня нет доступа к клиенту Outlook.