#html #css #email
#HTML #css #Адрес электронной почты
Вопрос:
Я хочу отправить своим пользователям текстовое сообщение 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 не поддерживает CSS с фоновым изображением!
http://www.campaignmonitor.com/css/
что я могу с этим поделать?
Комментарии:
1. Пожалуйста, не ставьте теги в заголовке. Кроме того, это не имеет ничего общего с ASP.Net .
2. на самом деле вы ничего не можете сделать, поскольку positon и z-index также не поддерживаются gmail
3. Редизайн до тех пор, пока вы не найдете что-то, что будет работать со встроенными изображениями, — это один из вариантов, который часто делают люди. Проверьте любое другое полученное вами HTML-сообщение электронной почты и посмотрите, сколько попыток используют фоновые изображения.
4. но я хочу повторить свой логотип в качестве фонового изображения / поэтому я не могу использовать внутри img / также мы не можем использовать javascript для некоторых исправлений ширины и высоты изображения / любая другая идея?
Ответ №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>
Комментарии:
1. есть ли способ повторить это?
2. Если размеры таблицы больше, чем изображение, изображение будет повторяться для заполнения таблицы.
3. можем ли мы использовать атрибут background в
<td>?4. Это больше не работает для gmail. (работает для Outlook).
5. Он снова работает для gmail. И да, вы можете использовать его в
<td>
Ответ №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
Комментарии:
1. спасибо за полезные ссылки / у меня есть небольшой вопрос от вас, который я не знаю, могу ли я опубликовать его как Q или нет! однако я просто хочу знать, каков наилучший способ создания html-писем в asp.net с помощью c # и отправлять их с кодом позади? должен ли я создавать HTML-сообщения электронной почты только в коде, или есть лучший способ их создания (имеется в виду визуально)!
Ответ №3:
Обновление с 2019 года. Хотя есть проблемы с добавлением фонового изображения из встроенного изображения в электронное письмо (по крайней мере, я не нашел способа заставить его работать). На самом деле css-фоновое изображение отлично работает по крайней мере с некоторыми элементами, если они являются абсолютными 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
c) ссылка была повреждена
d) отсутствует одинарная кавычка
e) одинарные, а не двойные кавычки вокруг стиля атрибута
f) несмотря на ширину и высоту стиля, div имел размер 0x0
(Некоторые из вышеперечисленных звучат глупо)
Ответ №4:
Что в конечном итоге сработало для меня, так это изменение расширения изображения с .svg на .png
Кажется, Gmail не поддерживает .svg изображения.