个人中心
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
文章推荐： html - 修复了带有水平菜单项的 Bootstrap 中的响应容器
文章推荐： html -

不同时间的边界转换

文章推荐： asp.net - 如何使用 asp.net 在图像数据列表中应用按需加载(延迟加载)概念？
文章推荐： javascript - 如何在 ruby​​ on Rails 中集成 arbor.js
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com