Outlook HTML电子邮件中的VML表格单元格背景图像仅在单击或调整大小时可见

时间:2014-12-11 14:36:43

标签: image email background outlook vml

我有一个表格单元格,其中包含Outlook的VML背景图像后备。它到目前为止工作,但有时(我认为当图像需要更多时间从服务器加载时)VML背景仅在我单击相关单元格或者当我调整Outlook窗口大小或通过以下方式打开电子邮件时可见双击单个视图窗口。

任何暗示这里出了什么问题?

非常感谢你。

<td class="background-cell-1" width="750" height="322" style="width: 750px; height: 322px; border-collapse: collapse; border: 0 none transparent; background-image: url('https://www.uponor.de/~/media/uponor-global/ecm-newsletter-2014/header-backgrounds/uponor-and-more1.jpg'); background-position: center; background-repeat: no-repeat; background-color: #0062C8; position: relative;">
<![if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 750px; height: 322px;" >
    <v:fill type="tile" src="https://www.uponor.de/~/media/uponor-global/ecm-newsletter-2014-vml-fallbacks/used-in-template-and-template-branches/branch-uponor-and-more-1.png" color="#0062C8" />
    <v:textbox inset="0,0,0,0">
        <div class="vml-panel-1" style="padding: 0; margin: 0; border: none; ">
<![endif]>        

<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border: 0 none transparent; width:100%;" width="100%">
[...my content...]    
</table>    

<![if gte mso 9]>
        </div>
    </v:textbox>
</v:rect>                    
<![endif]>

2 个答案:

答案 0 :(得分:1)

我发现这实际上是一个VML问题。我可以确认,如果我们使用VBScript替换图像源,它将刷新并显示图像。因此,要以另一种方式执行此操作,您可以将所有内容放在文本框中,然后将图像放在该文本框下。检查下面的代码。

<td background="https://www.uponor.de/~/media/uponor-global/ecm-newsletter-2014/header-backgrounds/uponor-and-more1.jpg" bgcolor="#0062C8" width="750" height="322" valign="top">  
<!--[if gte mso 9]>  
<img src="https://www.uponor.de/~/media/uponor-global/ecm-newsletter-2014/header-backgrounds/uponor-and-more1.jpg" alt="replace" height="92" width="120" border="0" style="display: block;" />  
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:relative;top:0;left:0;width:750px; height: 322px;">  
    <v:textbox inset="0,0,0,0">
<![endif]-->  
CONTENT GOES HERE  
<!--[if gte mso 9]>  
    </v:textbox>
</v:rect>  
<![endif]-->  
</td>  

我还写了post这个。

如果这对您有用,请告诉我。我知道这是一个痛苦的屁股。但我无法找到另一条道路。也许你可以跟我分享你的想法。

答案 1 :(得分:0)

是否与代码的某些布局有关,而不是遵循http://backgrounds.cm/网站提供的内容?

<td background="image-name.jpg" bgcolor="#52627e" width="640" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:95px;">
    <v:fill type="tile" src="image-name.jpg" color="#52627e" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
    <table cellpadding="0" cellspacing="0" border="0" height="auto" width="100%">
        /* CONTENT */
    </table>

  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

也许尝试根据我的方式格式化您的代码,看看会发生什么? 另外,你的图像尺寸是否相当大?