Фоновое изображение VML

У меня есть новый вызов, который я не видел опубликованным или ответом здесь....

У меня есть изображение, которое должно отображаться в правом верхнем углу сообщения электронной почты в Outlook, но это изображение обрабатывается как фоновое изображение — основное содержимое сообщения размещается поверх него. Файл изображения НЕ имеет ширину электронного письма. Это около 15% ширины письма и, возможно, 20% высоты.

Тело письма должно быть шириной 640 пикселей, высота может варьироваться. Изображение имеет ширину 203 пикселя и высоту 432 пикселя.

Я использую VML для отображения фонового изображения в Outlook. Изображение настроено как фоновое изображение тега <td>, и этот тег содержит ряд дополнительных таблиц, которые обеспечивают тело электронной почты (отсюда и переменная высота). Изображение должно появиться только один раз в правом верхнем углу td.

Будут ли coororigin и coordposition правильным подходом для сохранения изображения в одном месте, или это негативно повлияет на td, содержащий остальную часть тела электронной почты?

Любая помощь будет оценена по достоинству.


person Mel    schedule 14.12.2015    source источник


Ответы (1)


Ниже приведен минимум, необходимый для достижения того, о чем вы просите:

<!-- main containing table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <!-- main body table -->
      <table class="w320" width="640" cellpadding="0" cellspacing="0" border="0" style="position:relative;">
        <tr>
          <td style="position:relative;>
          <!--[if gte mso 9]-->
          <v:image src="...yourimagehere.jpg" style="width:203px;height:432px;position:absolute;top:0;right:0;z-index:-1;" />
          <![endif]-->

          Your email here

Имейте в виду, что использование отрицательного z-индекса для объектов VML при использовании цвета фона в теле письма приведет к тому, что объект VML будет отображаться за bgcolor.

VML позволяет использовать намного больше стилей, чем ваш типичный HMTL, отображаемый в текстовом процессоре, используйте все преимущества там, где вы можете.

На самом деле я не могу вспомнить, работает ли «правильно» для позиции в Outlook. если не просто используйте left:397px; вместо.

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

person Alex Barber    schedule 16.02.2016