如何在HTML电子邮件中为OUTLOOK

时间:2019-01-24 15:31:55

标签: html email outlook vml

我在Outlook中的电子邮件的背景图片有问题。它没有完全加载。

我试图在vml中使用bulletproof.com上提供的代码,但没有成功。

这是我使用的代码:

<body style="margin: 0; padding: 0;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td background="http://image" style="background-image: url(http://image);">
          <!--[if(gte mso 9)|(IE)]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
             style=" border: 0;display: inline-block; width: 525pt; height: 825.25pt;" 
             src="http://image" />
             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
             style=" border: 0;display: inline-block;position: absolute; width: 525pt; 
             height: 825.25pt;">
             <v:fill  opacity="0%" color="#f7901e"  />
             <v:textbox inset="0,0,0,0">
              <![endif]-->
          <div>
            ........
          </div>
          <!--[if(gte mso 9)|(IE)]>
               </v:textbox>
               </v:fill>
               </v:rect>
               </v:image>
            <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</body>

有人可以帮我吗?

2 个答案:

答案 0 :(得分:0)

尝试一下,我从未真正看到过用于背景图像的标签-只是带有背景图像的矩形。

<td valign="top" align="center" background="IMAGEURL">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:525pt;height:825.25pt;">
<v:fill type="tile" src="IMAGEURL" color="#FALLBACK COLOUR"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
   <div>CONTENT</div>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

如上所述-我们正在绘制一个具有背景图像的矩形,而不是绘制一个矩形和图像。别忘了更改图像URL和后备颜色-如果发现内容呈现有点古怪,则还可以使用文本框插图来充当填充物。与填充不同-值分别为左,上,右,下(相对于标准的上,右,下,左)。

答案 1 :(得分:0)

如果这不适用于您,则可能是图像问题,托管图像的权限或代码中的其他内容弄乱了显示。

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 600px; background-position: center center !important;">
<v:fill type="tile" src="https://i.stack.imgur.com/ZkQH8.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

<p>**Content Goes Here**</p>

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

您应该在Outlook 2007-2019中看到的是下面600x600px正方形的图像。

background image

祝你好运。