css - 图像上的通讯图像

Question

谁能帮我解决我的问题？我尝试用几个表段构建时事通讯，因为 mailchimp 有代码问题，如果他不在表中就会破坏我的邮件内容。对我来说主要问题是图像重叠。请看一下我的代码。

图案是底部图像，尺寸为 100% (700x50px)， Logo 是顶部图像 (32x32px)。 Logo 必须位于右侧并位于图案图像上方，顶部边距为 -20 像素，右侧边距为 30 像素，但不使用“位置”属性(mailchimp 打破所有位置属性)。

现在，我的 Logo 正在设计中。我试图用 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 (>2007) 的原生语言。所有其他电子邮件客户端应该能够阅读 td 上的背景声明。

以下代码需要注意的几点:

• 我在您需要为 VML 添加高度的地方添加了 [HEIGHT OF IMAGE]。
• 您没有提供 Logo 所需的图片尺寸。注意 Outlook 不会读取图像的样式属性。

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td background="/image/UX7Jw.png" style=" background:url(/image/UX7Jw.png);background-image:url(/image/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="/image/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="/image/164VA.png" alt="logo" align="right"/></td>
      </tr>
    </table>


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

让我知道这是否适合您。