Исходное изображение css внутри html-адреса электронной почты - Gmail не поддерживает

Я хочу отправить html-адрес электронной почты тела, как показано ниже, с помощью css-изображений для моих пользователей:

<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
    My Content
</div>

но по ссылке ниже говорится, что google не поддерживает background-image css!
http://www.campaignmonitor.com/css/

что я могу сделать по этому поводу?

Ответ 1

Вы пытались установить атрибут background таблицы?

Это рекомендуемый метод, описанный в следующем сообщении блога Mailchimp: Фоновые изображения и CSS в электронной почте HTML.

Пример (протестирован в Gmail)

    <table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
        <tr>
            <td>
                Email Content...
            </td>
        </tr>
    </table>

Ответ 2

Вы ничего не можете с этим поделать. Использование CSS для установки фонового изображения не поддерживается во многих почтовых приложениях из-за соображений безопасности.

Единственный способ показать фон за текстом - создать изображение с текстом на нем и отобразить его с помощью тега <img src="##" />. Хотя, всегда помните, что вы добавляете ссылку на текстовую версию своей электронной почты и/или ссылку на копию своей рассылки на веб-странице.

В дополнение, вам нужно помнить, что дизайн рассылки новостей отличается от дизайна веб-сайта. Вам нужно игнорировать все обычные стандарты, вам нужно использовать таблицы, встроенные стили, теги img и т.д.

Просмотрите эту страницу за несколько хороших предложений: http://www.sitepoint.com/code-html-email-newsletters/

Кроме того, MailChip (возможно, самая популярная система управления рассылкой новостей) имеет несколько очень хороших предложений о том, как кодировать HTML-письма: http://kb.mailchimp.com/article/how-to-code-html-emails

Ответ 3

Я тестировал gmail: gmail удалит background-color = # FFFFFF с "фоновым изображением", это странно.

"фон" работает, поэтому конвертируйте фоновый цвет и фоновое изображение в "фон" в стиле.

"background-color" = # FEFEFE тоже работает

проверено на 2013-09-10

Ответ 4

Обновление от 2019. Хотя есть проблемы с добавлением фонового изображения из встроенного изображения в электронное письмо (по крайней мере, я не нашел способа заставить его работать). На самом деле css-background image отлично работает, по крайней мере, с некоторыми элементами, если они являются абсолютными URL-адресами ресурса, мой фрагмент, который работает в gmail по состоянию на июнь 2019 года:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">

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

а) тогда это не сработало

б) он не работает на элементах div

в) ссылка была сломана

г) пропущена одинарная кавычка

д) одинарные и не двойные кавычки вокруг стиля атрибута

f) несмотря на ширину и высоту стиля div имеет размер 0x0

(Некоторые из вышеперечисленных звучат глупо)