通过图像通讯图像

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

图案是底部图像，并有100％的大小（700x50px）和标志是顶部图像（32x32px）。徽标必须位于右侧，图案图像上的margin-top -20px和margin-right 30px，但不使用“position”属性（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; 
}

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

头应该是什么样子：

来源

2017-07-30 CoaBoy

该解决方案是否适合您？ – Syfer

为了使电子邮件工作的背景，您可以使用职位（如你所发现的）。要使背景在Outlook中工作，您需要使用VML（矢量标记语言），这是Outlook（> 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>

让我知道这对你的作品。

来源

2017-07-30 09:20:46 Syfer

现在，徽标在图案图像上，这就是我想要的，但是当我尝试使用保证金属性向下移动徽标时，我的背景也会向下移动。标志必须是分开的对象。 – CoaBoy

在包含h1和徽标的td上使用填充（不包括边距）。看到我上面的编辑。看我上面的例子。 – Syfer

我已经更新了我的代码，您的要求是什么。它现在应该工作。 – Syfer

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

Example

来源

2017-07-30 15:24:55 CoaBoy

这是一个答案的地方。我建议你删除它并将其作为我的回答下的评论。人们可以快速投票或标记这样的事情。 – Syfer

通过图像通讯图像

回答

相关问题