首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何设置带有背景图像的电子邮件头?

如何设置带有背景图像的电子邮件头?
EN

Stack Overflow用户
提问于 2018-08-17 23:05:32
回答 1查看 534关注 0票数 0

我正在与这段代码作斗争。我已经创建了这个标题,它基本上由一个有2行的表组成,这就是我想要做的:

  1. 阴影( cid:img-headerbg的底部)必须在底部(如何更改cid:img-headerbg以应用于表?)
  2. 如何消除此间隙,使黄线位于底部?

这是我的标题:

代码语言:javascript
复制
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: {{accent_color}};">
        <tr>
            <td background="cid:img-headerbg" bgcolor="{{accent_color}}" valign="bottom" style="background-color:{{accent_color}};background-image: url('cid:img-headerbg');background-size:100% 100%; background-repeat:repeat-x; background-position: top left;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                  <v:fill type="frame" size="100%,100%" src="cid:img-headerbg" color="#eb847b" />
                  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
                <div style="max-width: 680px; margin: 0 auto;">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
                    <tr>
                    <td>
                    <![endif]-->
                    <table style="border:0;border-collapse:collapse;margin:0 auto;padding:0" align="center" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="30">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td style="margin:0 auto;padding:0;text-align:center;" align="center" width="100%">
                                <a href="{{base_url}}" style="display: block; top: 0; outline: medium none; text-align: center; text-decoration: none; margin:0 auto;" align="center">
                                    <img alt="{{company_name}}" label="{{company_name}}" src="cid:img-logo" style="border: 0px; display: block; max-width: 100%; max-height: 100%; margin:0 auto;" />
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td style="color:#ffffff;font-family:'Roboto','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:25px;margin:0 auto;padding:15px 0;text-align:center;text-decoration:none" align="center" width="100%">
                                {{header_title}}<br />
                                <small>{{header_subtitle}}</small>
                            </td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
        <tr>
            <td background="cid:img-colour_stripe" bgcolor="{{primary_color}}" valign="bottom" style="background-color:{{primary_color}};background-image: url('cid:img-colour_stripe');background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                                <v:fill type="frame" size="100%,2px" style="background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;" src="cid:img-colour_stripe" color="#eb847b" />
                                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                              <![endif]-->
                <div style="max-width: 680px; margin: 0 auto;background-color: #ffffff;">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center" bgcolor="#ffffff" style="margin: 0 auto;padding:0;">
                    <tr>
                    <td>
                    <![endif]-->
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
                        <tr>
                            <td height="100%" valign="top" width="100%" style="padding: 10px 0; background-color: #ffffff;margin:0;"></td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
    </table>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51898216

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档