图像上的时事通讯图像

Question

任何人都可以帮我解决我的问题吗？我尝试使用几个表段来构建新闻稿，因为mailchimp存在代码问题，如果他不在表中，则会破坏我的邮件内容。对我来说主要的问题是图像超过图像。请看一下我的代码。

图案为底部图像，尺寸为100％（700x50像素），徽标为顶部图像（32x32像素）。标识必须位于右侧和图案图像上，边距为-20px，边距为右边30px，但不使用＆＃34;位置＆＃34; property（mailchimp打破所有位置属性）。

现在，我的徽标处于模式之下。我试着用z-index解决这个问题，但这里什么也没发生。

<table class="header_class">
<td>
<img class="pattern_header"src="pattern.jpg" alt="pattern" />
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/>
<h1>July 2017</h1>
</td>
</table>

我的css：

pattern_header{
max-width: 700px;
}

logo_small{

margin-right: 30px;
margin-top: -20px;
}

（我完全是初学者，也许我的代码不是很好）

标题应该是什么样的：

Answer 1

对于处理电子邮件的背景，您可以使用职位（如您所知）。要在Outlook中使用背景，您需要使用VML（矢量标记语言），这是outlook（＆gt; 2007）的原生。所有其他电子邮件客户端都应该能够阅读td上的背景声明。

以下代码中没有注意事项：

• 我已添加[HEIGHT OF IMAGE]，您需要在其中添加VML的高度。
• 您尚未提供徽标所需的图像尺寸。注意Outlook不会读取图像上的样式属性。

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);">
        
         <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;">
        <v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" />
        <v:textbox inset="0,0,0,0">
      <![endif]--> 

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        
        <td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td>
      </tr>
    </table>


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

请告诉我这是否适合您。

Answer 2

这就是我需要的。徽标对齐不在顶部（从顶部20px和右侧30px偏移）。模式对齐是最重要的。

Example