gpt4 book ai didi

css - 电子邮件模板在 hotmail 中不显示背景图片

转载 作者:行者123 更新时间:2023-11-28 06:06:09 27 4
gpt4 key购买 nike

我刚刚在 magento 中为我的一位客户创建了一个时事通讯模板。但问题是它没有在 Hotmail Gmail Yahoo 等中显示背景标题图像。它在测试环境和网络邮件中显示完美,但在任何 Outlook 等中都没有。这是给大家的代码。你能告诉我我做错了什么吗?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Newsletter</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="90" align="center" valign="top" style="background-image:url(http:placehold.it/350x150.jpg); background-repeat:no-repeat; background-position:center top;"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="300" height="90" align="left" valign="middle"><a href="http://www.mysite.co.uk"><img src="http://www.mysite.co.uknewsletter/logo.png" width="177" height="48" alt=""/></a></td>
<td width="300" height="90" align="right" valign="middle"><img src="http://www.mysite.co.uknewsletter/contact-us.png" width="146" height="47" alt=""/></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="35" align="left" valign="top" style="background-image:url(http://www.mysite.co.uknewsletter/menu_bg.jpg); background-repeat:repeat-x; background-position:center top;">
<a href="https://www.smartteck.co.uk" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">Home</a>
<a href="http://www.mysite.co.ukpc-components.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">PC COMPONENTS</a>
<a href="http://www.mysite.co.ukdesktop-pc-s.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">DESKTOP PC’S</a>
<a href="http://www.mysite.co.uklaptops.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">LAPTOPS</a>
<a href="http://www.mysite.co.ukmonitor-tv-s.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">MONITOR & TV’S</a>
<a href="http://www.mysite.co.ukstorage.html" style="line-height:35px; padding:0px 8px; color:#FFFFFF; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">STORAGE</a>
<a href="http://www.mysite.co.ukgaming-gadgets.html" style="line-height:35px; padding:0px 8px; color:#FF0000; font-family:arial; font-size:12px; text-decoration:none; text-transform:uppercase;">SALE</a>

</td>
</tr>
<tr>
{{inlinecss file="email-inline.css"}}
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
<table cellpadding="0" cellspacing="0" border="0">
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="email-heading">
<h1>Thank you for your order from {{var store.getFrontendName()}}.</h1>
<p>Once your package ships we will send an email with a link to track your order. Your order summary is below. Thank you again for your business.</p>
</td>
<td class="store-info">
<h4>Order Questions?</h4>
<p>
{{depend store_phone}}
<b>Call Us:</b>
<a href="tel:{{var phone}}">{{var store_phone}}</a><br>
{{/depend}}
{{depend store_hours}}
<span class="no-link">{{var store_hours}}</span><br>
{{/depend}}
{{depend store_email}}
<b>Email:</b> <a href="mailto:{{var store_email}}">{{var store_email}}</a>
{{/depend}}
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
{{depend order.getIsNotVirtual()}}
<td class="address-details">
<h6>Ship to:</h6>
<p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
</td>
{{/depend}}
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table>

<tr>
<td height="20" align="center" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="56" align="center" valign="middle" bgcolor="#dcdcdc">
<img src="http://www.mysite.co.uknewsletter/brand-1.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-2.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-3.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-4.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-5.jpg" width="110" height="35" alt=""/></td>
</tr>
<tr>
<td height="75" align="center" valign="middle">
<a href="https://www.facebook.com/SmartTeckLtd"><img src="http://www.mysite.co.uknewsletter/facebook.jpg" width="31" height="31" alt=""/></a>&nbsp;
<a href="https://twitter.com/SmartTeck_Ltd"><img src="http://www.mysite.co.uknewsletter/twitter.jpg" width="31" height="31" alt=""/></a>&nbsp;
<a href="https://plus.google.com/+SmartteckUk/"><img src="http://www.mysite.co.uknewsletter/gplus.jpg" width="31" height="31" alt=""/></a>&nbsp;
<a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/pinterest.jpg" width="31" height="31" alt=""/></a>&nbsp;
<a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/youtube.jpg" width="31" height="31" alt=""/></a>&nbsp;
<a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/instagram.jpg" width="31" height="31" alt=""/></a>&nbsp;
<a href="http://www.mysite.co.uk#"><img src="http://www.mysite.co.uknewsletter/linkedin.jpg" width="31" height="31" alt=""/></a></td>
</tr>
<tr>
<td height="33" align="center" valign="middle" bgcolor="#1696da" style="color:#FFFFFF; font-family:arial; font-size:12px;">&copy; Copyrights 2016 Smart Tech 786 Ltd, Registered Number 09713584.</td>
</tr>
<tr>
<td height="20" align="center" valign="top" style="line-height:40px; font-size:11px; font-family:arial;">
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>

最佳答案

带有 html 的电子邮件可能...很困难,所以使用旧的标记方式

<td height="90" align="center" background="myback.gif">...</td>

边注

您也有错字,这将解决支持较新 css 样式的电子邮件客户端的问题,您忘记了 url 中的 2 个正斜杠,因此将 http:placehold... 更改为http://placehold...

style="background-image:url(http://placehold.it/350x150); ..."

如果内联样式仍然存在问题,您可能需要更改标题背景,将其从 td 中删除并将其添加到表格中,如下所示

          <td height="90" align="center" valign="top">                
<table width="600" border="0" cellspacing="0" cellpadding="0" background="http://placehold.it/350x150">

关于css - 电子邮件模板在 hotmail 中不显示背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36435588/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com