Android Gmail 应用程序的背景图片

Question

有没有办法让 HTML 电子邮件的 td 中包含的背景图像显示在 Android 的 Gmail 应用程序中。它似乎适用于 iOS.

的 Gmail 应用程序

代码如下：

<table width="100%" style="table-layout: fixed; margin: 0 auto; width:100% !important; min-width: 100% !important; height:auto !important;" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="center">
        <table align="center" width="760" style="table-layout: fixed; margin: 0 auto; min-width: 760px;" border="0" cellspacing="0" cellpadding="0" class="w100pc">
            <tr>
                <td height="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td>
            </tr>
            <tr>
                <td>
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td valign="top" background="https://placeholdit.imgix.net/~text?txtsize=33&txt=760%C3%97340&w=760&h=340" bgcolor="#323232" width="760" height="340" style="min-width: 760px; background:url(https://placeholdit.imgix.net/~text?txtsize=33&txt=760%C3%97340&w=760&h=340) no-repeat center center; background-color: #323232; background-position: center center;" class="w100pcmbg">
                                <!--[if gte mso 9]>
                                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:760px;height:340px;">
                                <v:fill type="tile" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=760%C3%97340&w=760&h=340" color="#323232" />
                                <v:textbox inset="0,0,0,0">
                                <![endif]-->
                                <div>
                                    <table align="center" width="600" cellspacing="0" cellpadding="0" border="0" style="min-width: 600px; margin: 0 auto;" class="w100pc">
                                        <tr>
                                            <td align="left" valign="top" height="15" colspan="3" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" valign="top" width="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;" class="w80"></td>
                                            <td align="left" valign="top" height="260" style="line-height: 25px !important; line-height: 25px; font-size: 18px !important; padding: 0px; margin: 0px; display: block; float: left;">
                                                <span style="font-family: 'Century Gothic', Verdana, sans-serif; line-height: 25px  !important; font-size: 18px !important; line-height: 25px; padding: 0px; margin: 0px; display:block; color: #787878; font-weight: bold;">
                                                    Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. Lorem ipsum. Lorem upsum. 
                                                </span>
                                            </td>
                                            <td align="left" valign="top" width="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;" class="w80"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" valign="top" height="15" colspan="3" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td>
                                        </tr>
                                    </table>
                                </div>
                                <!--[if gte mso 9]>
                                </v:textbox>
                                </v:rect>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="20" style="font-size: 0px; padding: 0px; margin: 0px; line-height: 0px;"></td>
            </tr>
        </table>           
    </td>
</tr>

Fiddle: https://jsfiddle.net/uvpb0ydc/1/

Answer 1

您的代码在 android 上的 gmail 应用程序中运行良好。如果您使用 Litmus 进行测试，那么图像将不会显示。它是 gmail 应用程序的 litmus 渲染中的错误 android :)

Android Gmail 应用程序的背景图片

Background images on Gmail App for Android

css

gmail

android

html-email