Question

我刚为我的一位客户在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>

Answer 1

使用html发送电子邮件可能很困难，因此请使用旧的标记方式

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

旁注

你也有一个拼写错误，这将解决支持更新css样式的电子邮件客户端的问题，你忘记了你的网址中的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">

Answer 2

尝试在css中包含完整的网址

像这样举例： https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150&fm=jpg

<!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(https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150&fm=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>

电子邮件模板未在hotmail中显示背景图像

2 个答案: