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, отправив рекомендации по электронной почте здесь