html электронная почта со стилем фонового изображения не показана

Question

Я создаю шаблон электронной почты, который должен отображать изображения с внешнего сайта.Я поместил несколько <img> тегов для рендеринга изображений, и есть некоторые <td> теги со свойством background-image, установленным во встроенном CSS элементов.

Теперь, когда электронная почта получена в outlook,изображения не отображаются (это ожидается, поскольку изображения не встроены).И я нажимаю на загрузку изображений, чтобы увидеть изображения правильно.Изображения в теге <IMG> отображаются только, а фоновое изображение для <TD> не отображается.

Есть какие-либо мнения по решению этой проблемы?

Спасибо!

Answer 1

Наконец-то я нашел ответ.

Outlook 2007 не использует движок рендеринга Internet Explorer для загрузки содержимого HTML.Вместо этого он использует возможности Word 2007 HTML и CSS.

Из-за этого атрибуты CSS, такие как background-image, не поддерживаются.И, следовательно, невозможно установить фоновое изображение для элементов HTML в Outlook, используя стандартные теги CSS.

Более подробная информация доступна на http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx

Answer 2

На самом деле есть способ использовать фоновые изображения в электронных письмах HTML в Outlook.

Как Чайтанья упоминает, это не может быть сделано с помощью CSS, но это может быть сделано с помощью VML.

Техника немного сложнее, чем background: url(....), и я использую ее не так часто, как я бы использовал технику CSS (если бы она работала в Outlook). Но это очень полезно.

Я успешно использовал его в ряде кампаний.

Полные инструкции здесь: включая список почтовых клиентов, поддерживающих эту технику.

http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

Answer 3

Фоновые изображения не поддерживаются в Outlook.Рекомендуется не использовать фоновые изображения в электронных письмах в формате HTML.Если у вас должен быть фон, вы можете использовать и ПЛЮС сплошным цветом.Те, у кого есть почтовые клиенты, которые поддерживают фоновые изображения, получат изображения, а те, кто их не поддерживает, получат сплошной цвет.

Answer 4

Кроме того, вот руководство от Campaign Monitor: http://www.campaignmonitor.com/css/, которое оказалось очень полезным для меня.

Answer 5

Существует способ отображения изображений в формате HTML.

Правильные HTML-письма, отображаемые в формате MSWord в Outlook.

Я получил решение из этой https://stackoverflow.com/a/12693917/413032 публикации.

Итак, нам нужен альтернативный вариант.

На самом деле вы можете открыть свой HTML-адрес электронной почты в MSWORD и найтичто кажется неправильным, и учитывая, что может быть альтернативой, дает представление.

Вот что я сделал;

1. Добавлено v пространство имен в HTML-тег

     < html xmlns:v="urn:schemas-microsoft-com:vml"
   

2. Добавлен стиль v в блок головы

   < head >
    <style type="”text/css”">
          v\:* { behavior: url(#default#VML); display:inline-block}
    </style>
   

3. В таблице или где вам нужно добавить ваш MSWord альтернативный

   <table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
               <!--[if gte vml 1]>
                       <v:shape 
                           stroked='f'
                            style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;     
                                   z-index:-503306481;
                                   visibility:visible;
                                   width:720pt;
                                   height:475pt;           
                                   top:0;
                                   left:0;
                                   border:0;                                               
                                   '>
                           <v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
                       </v:shape>
               <![endif]-->
                   <tbody> ....
   

Вот и все.Конечно, это будет рендер MSWord.И еще, как вы заметили, мы используем абсолютное позиционирование ...

В любом случае, это обходной путь, который решает проблему в некотором роде.Мы надеемся, что однажды MS-Outlook будет обрабатывать электронные письма в формате html с помощью веб-браузера, а не MS-Word.

Answer 6

Это работает в Gmail,

Я пытался это показать div с изображением в почтовой рассылке, попробуйте inline css , отправив инструкции по электронной почте здесь