【发布时间】: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