Html-адрес электронной почты с фоновым изображением не показан

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

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

Любые взгляды на решение этой проблемы?

Спасибо!

Ответ 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

Ответ 2

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

Ответ 3

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

Как говорит Chaitanya, это невозможно сделать с помощью CSS, но это можно сделать с помощью VML.

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

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

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

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

Ответ 4

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

Ответ 5

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

Правые html-сообщения, представленные в качестве документа MSWord в Outlook.

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

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

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

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

Добавлено v namespace в тег html

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

Добавлен стиль v для заголовка

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

В таблице или где вам нужно добавить альтернативу 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.

Ответ 6

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

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