【问题标题】:Email HTML - Making a responsive background image for a table电子邮件 HTML - 为表格制作响应式背景图像
【发布时间】:2014-12-10 13:24:16
【问题描述】:

我使用http://backgrounds.cm 为我的桌子制作了背景图片,我正在经历制作电子邮件活动的可怕过程,这需要编写看起来非常非常古老的 HTML。

无论如何,这是我的表格代码:

<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;" background="images/image.png" bgcolor="#ffffff" valign="bottom">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:576px;">
    <v:fill type="tile" src="images/merrychristmas.png" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <tr>
    <td class="cols-wrapper" style="padding-left:12px;padding-right:12px">
    <!--[if mso]>
      <table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
      <tr><td width="576" style="width: 576px;" valign="top"><![endif]-->
        <table width="576" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 576px;">
          <tr>
            <td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:0px;padding-bottom:0px">
              <div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333;margin-top:12px">Content here</div>
              <br>
              <table bgcolor="#1480ef" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="button" height="35" style="text-align:center;font-size:16px;font-family:sans-serif;font-weight:normal;padding:0 20px 0 20px;">
                    <a href="#" target="_blank" style="color:#ffffff;text-decoration:none;">Button</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr><!-- /Content -->
        </table>
      <!--[if mso]></td></tr></table><![endif]-->
    </td>
  </tr>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</table>

我使用的背景图片看起来不错,但是当我尝试创建响应式电子邮件设计时,它无法正确缩放。我在顶部附近有一个横幅,可以很好地缩放,但我不知道如何使背景图像缩放。图像目前保持固定宽度,但我希望它始终缩放到表格的宽度。

有什么想法吗?

【问题讨论】:

  • 我认为要调整背景大小,您应该在其中某处使用background-size
  • @GolezTrol 不确定电子邮件是否支持
  • 我也不是,这取决于客户。尝试不会有什么坏处。如果它不起作用,我认为没有解决方案。如果客户端阻止它,您无能为力。
  • 在电子邮件中使用背景图片是不好的做法。一些电子邮件客户端甚至不支持静态大小的背景图片,甚至更少支持响应式图片。
  • @APAD1 感谢您的提示,为了安全起见,我选择了可​​重复的模式。

标签: html css email background-image html-email


【解决方案1】:

你可以尝试设置 background-size:contain;在你有图像的元素上。 您只会看到它在较小的屏幕上工作,例如平板电脑和智能手机,猜测它们会得到支持。 移动设备上的 Css 支持似乎比客户端的桌面版本好得多...

【讨论】:

  • 也注意到了这一点 :( 我决定只使用可重复的模式,因为我不必担心如何使图像具有响应性。
  • 不用担心。最好使用可重复的模式,但我从经验中知道,在按照其他人的规范进行设计时,这并不总是可行的:) 并且参考 @ADAP1 的回复,使用防弹背景,支持 99 % 的电子邮件客户端不再是问题。现在可能会更好,因为最近更新了一个主要客户以支持黑客攻击。
  • Outlook 移动应用程序现在是个大问题 :) 你可以让它对所有东西都做出响应,除了它目前不支持媒体查询(为什么会......它是一个移动应用程序 叹息)
猜你喜欢
  • 2016-10-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-23
  • 2011-05-16
  • 2017-11-15
  • 1970-01-01
  • 2014-03-28
相关资源
最近更新 更多