1

我在我的 HTML 电子邮件中使用图像作为背景，以便能够在图像的顶层分配文本和按钮，并且它适用于 Windows 7 上的 MS Outlook 2013 之外的每个电子邮件客户端。

出于某种原因，一旦用户收到电子邮件并单击按钮（或任何图像区域），图像周围就会出现奇怪的框架，并且该框架看起来用户可以编辑该图像（旋转或调整大小），但他不能，它只是一个框架。

我不知道如何摆脱那个框架。另一个问题是 Litmus 没有显示代码有任何问题，所以如果没有实际发送，就不可能修复它。请帮忙！

使用所有标题作为一个图像不是一种选择，因为客户端需要能够更改自己的文本。

在标头的代码部分下方，但这里是整个电子邮件的代码链接https://pastebin.com/edYR2eVm和石蕊项目https://litmus.com/builder/da4ef27

问题照片

            <!-- HERO : BEGIN -->
            <tr>
                <!-- Bulletproof Background Images c/o https://backgrounds.cm -->
                <td background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" bgcolor="#222222" align="center" valign="top" style="text-align: center; background-position: center center !important; background-size: cover !important;">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height:380px; background-position: center center !important;">
                    <v:fill type="tile" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" color="#222222" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div>
                        <!--[if mso]>
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="500">
                        <tr>
                        <td align="center" valign="middle" width="500">
                        <![endif]-->
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;">

                            <tr>
                                <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
                            </tr>

                            <tr>
                              <td align="center" valign="middle">

                              <table>
                                 <tr>
                                     <td valign="top" style="text-align: center; padding: 60px 0 10px 20px;">

                                         <h1 style="margin: 0; font-family: 'Montserrat', sans-serif; font-size: 30px; line-height: 36px; color: #ffffff; font-weight: bold;">WELCOME %%FIRST NAME%%</h1>
                                     </td>
                                 </tr>
                                 <tr>
                                     <td valign="top" style="text-align: center; padding: 10px 20px 15px 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #fff;">
                                         <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                         tempor incididunt ut labore.</p>
                                     </td>
                                 </tr>
                                 <tr>
                                     <td valign="top" align="center" style="text-align: center; padding: 15px 0px 60px 0px;">

                                         <!-- Button : BEGIN -->
                                         <center>
                                         <table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="text-align: center;">
                                             <tr>
                                                 <td style="border-radius: 50px; background: #26a4d3; text-align: center;" class="button-td">
                                                     <a href="http://www.google.com" style="background: #26a4d3; border: 15px solid #26a4d3; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 50px; font-weight: bold;" class="button-a">
                                                         <span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;ACCESS ACCOUNT&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                     </a>
                                                 </td>
                                             </tr>
                                         </table>
                                         </center>
                                         <!-- Button : END -->

                                     </td>
                                 </tr> 
                              </table>

                              </td>
                            </tr>

                            <tr>
                                <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
                            </tr>

                        </table>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
            </tr>
            <!-- HERO : END -->
4

0 回答 0