背景图像未显示在 Outlook.com 中

Background image not displaying in Outlook.com

提问人:Stepppo 提问时间:9/25/2023 更新时间:9/25/2023 访问量:38

问:

不确定我是否犯了语法错误,但我无法让此电子邮件背景图像显示在 Outlook.com 中。它确实显示在 gmail 和 Outlook 桌面应用程序中。

<tr class="module" data-id="B1" data-description="B1 Large email heading">
                        
<td role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" valign="top" style="max-width: 600px; border-collapse: collapse;" class="">

<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 600pt; height: 495pt;" src="https://picsum.photos/600/495" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block;position: absolute; width: 600pt; height:495pt;">
<v:fill  opacity="0%" color="#ffffff”  />
<v:textbox inset="0,0,0,0">
<![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px; mso-cellspacing:0px; mso-padding-alt:0px;">
<tbody>
<tr>
<td valign="top" align="left" style="background-image: url('https://picsum.photos/600/495'); background-position: bottom left; background-size:cover; background-repeat: no-repeat; max-width: 600px;text-align: left; font-size: 16px; line-height: 21px; color: rgb(100, 114, 127); padding: 5px 15px 5px 15px;" background="https://picsum.photos/600/495" width="600" height="495" valign="top">
                                
<h2 style="font-size: 20px;font-weight: normal;margin:10px 0 0px 0;">CEO INSIGHT</h2>
<h2 style="color:#d11418; font-size: 20px;font-weight: normal;margin:0px 0 5px 0;">MATT JERSEY</h2>
    
<p style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut porta odio. In semper massa nec dictum aliquet. Phasellus dui nisi, faucibus a purus in, varius luctus elit. Praesent eleifend gravida pellentesque. </p>
    
<p style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut porta odio. In semper massa nec dictum aliquet. Phasellus dui nisi, faucibus a purus in, varius luctus elit. Praesent eleifend gravida pellentesque. </p>
    
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
                         
</td>
    

</tr>
HTML CSS 电子邮件

评论

0赞 scrhartley 9/25/2023
也许查看 Outlook.com 电子邮件中输出的 HTML 进行比较会很有用。此外,您可以在开发人员工具中查看 DOM 结构,看看它是否符合您的预期。
0赞 Stepppo 9/25/2023
这是图像的 <td>。也许这很有帮助: <td data-imagetype=“External” background=“/actions/ei?u=http%3A%2F%2Fimage.engage.srtenics.com%2Flib%2Ffe36157075640475711276%2Fm%2F1%2F8dd06e14-148c-4825-82ce-705058f5c6b1.jpg&d=2023-09-25T03%3A40%3A43.951Z“ originalsrc=”image.engage.srtenics.com/lib/fe36157075640475711276/m/1/...“ data-imageproxyendpoint=”/actions/ei“ bgcolor=”#ffffff“ width=”600“ height=”495“ valign=”top“>
0赞 scrhartley 9/25/2023
我猜它这样做是为了确保您没有使用背景图像来确认电子邮件已被阅读(通过为每个电子邮件地址生成唯一的图像 URL)。这允许垃圾邮件发送者确认他们已经找到了一个真实的地址,并且应该开始无情地发送垃圾邮件。因此,您可能不应该链接到外部图像,而应该嵌入您需要的图像。

答: 暂无答案