HTML электронная почта фоновое изображение для решения проблем Gmail - PullRequest
Новая
       7

HTML электронная почта фоновое изображение для решения проблем Gmail

0 голосов
/ 22 апреля 2020

Я новичок в создании электронных писем, и у меня есть некоторые проблемы с Gmail в этом. Текст выталкивается вправо и разделяет ячейку с фоновым изображением (изображение под текстом). Это, вероятно, ошибка пользователя от меня, но кто-нибудь может помочь? Текст должен лежать там, где он есть, но изображение должно покрывать фон. Это происходит только при рендеринге Gmail, это нормально для любого другого клиента (я выложил его в mso). 

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="msohide gmail" style="mso-hide: all;">
  <tr>
    <td align="center" bgcolor="#FFFFFF" style="padding: 10px 0 0 0; mso-hide:all">

      <table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper" style="mso-hide: all">

        <tr>
          <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-hide:all">
              <tr><a href="https://www.ggu.edu/alumni/connect/refer" style="text-decoration: none; color: #FFFFFF; mso-hide: all">
                <td bgcolor="#EAEAEA" class="background" background="http://image.e.ggu.edu/lib/fe3a157075640475711775/m/1/99060859-3ab8-4853-b5cd-e1f3d02b97d9.jpg" width="600" height="240" style="background: url('http://image.e.ggu.edu/lib/fe3a157075640475711775/m/1/99060859-3ab8-4853-b5cd-e1f3d02b97d9.jpg'); background-repeat:no-repeat; background-position:top center;background-color:#ffffff; background-size: cover; mso-hide: all"></a>

                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-hide:all" class="dissapear">
                        <tr>
                            <td align="right" style="padding: 75px 0 0 0; mso-hide:all">

                                    <table border="0" cellpadding="0" cellspacing="0" width="300px" class="wrapper rapper" style="background-color: rgba(0, 86, 148, 0.57); mso-hide: all;">

                                             <tr>

                                                             <td align="center" style="color:#FFFFFF; font-size: 35px; font-family: Verdana; font-weight: bold;"><a href="https://www.ggu.edu/alumni/connect/refer" style="text-decoration: none; color: #FFFFFF; mso-hide: all">REFER NOW&rarr;</a>
                                                         </td>
                                                     </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
              <td class="mobileimage" style="display: none">
                  <a href="https://www.ggu.edu/alumni/connect/refer" alt="Krystal Chow" style="text-decoration: none; color: #FFFFFF"><img src="http://image.e.ggu.edu/lib/fe3a157075640475711775/m/1/99060859-3ab8-4853-b5cd-e1f3d02b97d9.jpg" width="99%" height="auto"></a>
            </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Изображение здесь: Пример

...