Question

尝试格式化一封带有五彩纸屑背景图像占据整个 <td> 的电子邮件，但它似乎不想与我合作。任何帮助表示赞赏

Desired Look（如何在 gmail 和本地呈现）看我得到（它如何在 Outlook 中呈现）

代码（仅用于五彩纸屑部分：

<tr>
                <td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; ">
                    <table width="100%" style="border-spacing:0;" role="presentation"  >
                        <tr width="100%">
                            <td class="padding content" width="100%" 
                                style="padding-top:90px;padding-bottom:20px;padding-right:20px;padding-left:20px;width:100%;text-align:center; font-size:20px;background-image: url(https://i.ibb.co/9cTRh0Y/confetti.png) ">
                                <!--[if gte mso 9]>
                                <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://i.ibb.co/9cTRh0Y/confetti.png" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
                                <v:fill  opacity="0%" color="#fff"  />
                                <v:textbox inset="0,0,0,0">
                                <![endif]-->
                                <div>
                                <p style="font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">
                                    Announcing the Self-Service Password Reset <br><strong style="color: #007da5;">Raffle Winner</strong></p>
                                <p style="font-size:18px;line-height: 23px;">Thank you to everyone who registered for the SSPR feature. <br> Out of everyone in ICT we had 48 people register! <br>Without further ado, the winner of the <strong>$20 gift card to Starbucks</strong>  is...</p>                                  
                                <p style="text-align:center;font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">Winner! </p>
                                <p style="font-size:12px;line-height: 23px;">The winner will be contacted separately to receive their prize</p>              
                            </div>                    
                                    <!--[if gte mso 9]>
                                    
                                    </v:textbox>
                                    </v:rect>
                                    <![endif]-->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

Answer 1

您的问题是您在包装上设置填充，然后填充 Outlook 背景图像。我建议将您的内容包装在另一个表格中，并在新表格的内部设置内边距，如下所示：

<tr>
<td style="width:100%;text-align:center; font-size:20px;background-image: url(https://i.ibb.co/9cTRh0Y/confetti.png)">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://i.ibb.co/9cTRh0Y/confetti.png" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
<v:fill  opacity="0%" color="#fff"  />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td style="padding:90px 20px 20px 20px; text-align:center; font-size:20px; font-family:arial, helvetica, sans-serif; border:1px solid blue;">
                <p style="font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">
                Announcing the Self-Service Password Reset <br><strong style="color: #007da5;">Raffle Winner</strong></p>
                <p style="font-size:18px;line-height: 23px;">Thank you to everyone who registered for the SSPR feature. <br> Out of everyone in ICT we had 48 people register! <br>Without further ado, the winner of the <strong>$20 gift card to Starbucks</strong>  is...</p>                                  
                <p style="text-align:center;font-size:23px; font-weight:bold; padding-bottom: 5px; line-height: 28px;">Winner! </p>
                <p style="font-size:12px;line-height: 23px;">The winner will be contacted separately to receive their prize</p> 
            </td>
        </tr>
    </table>          
</div>                    
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>

电子邮件模板的 VML 格式不起作用

1 个答案: