HTML Email - пуленепробиваемое фоновое изображение - PullRequest
Новая
       19

HTML Email - пуленепробиваемое фоновое изображение

0 голосов
/ 02 апреля 2019

Я пишу HTML-письма.У меня есть тд, содержащий фоновое изображение.Он рендерит во всех основных почтовых клиентах панель Outlook на Windows.Я решил использовать http://backgrounds.cm/ в качестве обходного пути.Моя проблема в том, что высота и ширина изображений не соответствуют введенным значениям.Изображение выглядит раздавленным.Я использую его как часть вложенной таблицы. 

<td class="full" width="300px" style="width: 300px;">
  <table>
    <tr>
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" bgcolor="#7bceeb" valign="top">
            <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
                        <v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
                        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                        <![endif]-->
            <div style="width: 200px; height: 200px;">
            </div>
            <!--[if gte mso 9]>
                        </v:textbox>
                        </v:rect>
                        <![endif]-->
          </td>
        </tr>
      </table>
    </tr>
    <table>
</td>

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

Более надежный метод - использовать CSS-свойство background-image - атрибут HTML background-фона все еще работает, но технически это не рекомендуется. Атрибут background также не позволяет изменять размеры изображений, так что это может быть проблемой, которую вы видите.

Лично я обычно так к ней отношусь: 

<td align="center" style="background-image: url('http://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: your-colour;"></td>

Другие свойства - остановить повторение фонового изображения, расположить верхнюю и центральную часть изображения и растянуть его, чтобы охватить выделенное пространство - свойство 'background-color' - это просто запасной цвет, если изображения не автоматически оказана, для поддержания общего эстетического дизайна.

Здесь есть замечательная лакмусовая статья:

https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

Надеюсь, это поможет!

0 голосов
/ 02 апреля 2019

Я пытаюсь заставить его работать сейчас.
Похоже, по умолчанию для самого изображения 567 x 341.

Я думаю, что это может работать 

<td class="full" width="300px" style="width: 300px;">
<table>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" width="200" height="200" bgcolor="#7bceeb" valign="top">
<tr>
  <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
                 <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
                    <v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                    <![endif]-->
        <div style="width: 200px; height: 200px;">
        </div>
        <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
      </td>
    </tr>
  </table>
</tr>
<table>

...